Vue之assets图片加载不出来的解决

说明

assets和static连个文件都是存放静态资源的目录

在html下使用它们是无差别的，但是在js中使用的话，assets中资源的路径要经过webpack中file-loader编译，而static中的文件，不会经过编译

二者中的图片资源，html页面可以直接使用；

但在动态循环绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。

解决

一、图片在assets目录下

使用require（）

img:[
        {imageUrl:require('../assets/2.png')},
        {imageUrl:require('../assets/3.png')},
      ]

二、将图片放到static目录下

img:[
        {imageUrl:'static/img/1.png'},
        {imageUrl:'static/img/2.png')},
        {imageUrl:'static/img/3.png'},
      ]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。