webpack+vue img的src问题

在vue中给图片添加路径试过三种方式：

1.在css的background中添加路径；

2.将路径写在data属性中，然后动态注入img标签的src属性；

3.在img标签中奖src属性写死

第三种方式会报错！第三种方式会报错！第三种方式会报错！

因为打包的时候必须写以当前组件为参照的相对路径，否则打包回报错说找不到；但是打包完打开页面，img的路径还是打包时的相对路径，但此时已经设置了publicPath，最终结果是pubilcPath+相对路径，导致404错误。

 

第一种方式,作为css背景图片，路径应该写相对于当前组件的路径；

第二种方式，作为字符串变量动态注入给img的：src属性，路径应该写相对于当前页面的路径。

　　比如img标签在index.html中，而图片在index同级的src文件夹的img子文件夹中，应该写'./src/img/xxx.jpg'

还有第三种方式是，仍然把img的src作为data属性中的变量，但此时写成下面的形式：

1 data(){
2   return{
3     img:require(/path/to/img)    
4   }
5 }

require(/path/to/img)   中  require里面是图片相对于组件的相对路径。

转载于:https://www.cnblogs.com/alan2kat/p/7442674.html