vue获取img下的内容_vue中img的src动态赋值（本地图片的路径）

问题&原因

1.问题：img的src属性直接绑定url变量，然而图片加载失败

2.原因：

在webpack中会将图片图片来当做模块来用

url-loader将直接将:src=" '../../assets/images/'+item.url+'.jpg' "解析成字符串，因为是动态加载的，所有无法解析图片地址

然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png，完整地址为localhost:8080/static/img/[filename].png】

解决办法

1.将文件放在statics目录下(与src同级)

图片一类的静态文件，应该放在这个static文件夹下

这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下

这时我们再去使用/static绝对路径，就可以访问这些静态文件了

注意：这样的话必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]

但是，放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。

为了兼顾可以把图片资源优化，所以还是不适合把图片资源放到static。

2.require方法

如果不想更改路径，可以用require将图片作为模块加载进去

用了require，就是将图片当成模块先引进来，再绑定。

当需要实现动态加载图片的时候就需要传一个变量给require&#x