如何在Vue或Nuxt项目中更好地引用图片资源？

Question

vue或nuxt项目里.vue文件只能用require引用图片资源吗？

我在vuex的state里面定义了对象的数组arr，里面每个对象有个imgsrc的属性，如imgsrc：'～/assets/img/hello.png'

但是在index.vue中遍历state里这个arr，<item,index> in arr，用img标签获取不到item.imgsrc的图片。
然后在index.vue的中data里面定义变量，用require方法，然后img标签使用这个变量才能获取图片。
想问：

由于state中arr数组中的对象较多，在里面写图片的路径感觉上比较整洁。如果在index.vue中，对上百个图片都使用require方法，有点低级。所以有什么好方法解决这个问题吗

Answer 1

常用nuxt，直接将图片放在static目录下，引用时使用/static/xx.png

Answer 2

1. 我不建议用 Vue 或者 Nuxt 管理图片资源。大部分图片类的资源有更好的管理方式。
2. 所以我建议用最简单的方式，即放在 /public 目录里，用到的时候就直接引用
3. 我不知道你为什么要 require 大量文件，这种形式最好通过配置文件来做，直接打包影响构建时间和最终生成的代码大小

Answer 3

如果是静态资源推荐存放到 /public 目录中，而不是放到项目的 /src/assets 目录。

这样你在项目中可以直接通过 /img/hello.png 来使用，而不需要使用 ~/@ 这样的别名或者 require 导入

HTML 和静态资源 | Vue CLI
静态资源处理 | Vite 官方中文文档
Assets · Get Started with Nuxt