vue 打包之后拿不到原先 static 文件里的图片

vue 打包之后拿不到原先 static 文件里的图片关于vue 打包是一个困扰了很多初学者的问题，当然包括我。不过vue-cli 已经优化的很好关于路径问题，百度上有很多，就是在修改：这个文件下的 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),

dongceha

14458人浏览 · 2018-03-30 16:22:43

dongceha · 2018-03-30 16:22:43 发布

vue 打包之后拿不到原先 static 文件里的图片

关于vue 打包是一个困扰了很多初学者的问题，当然包括我。不过vue-cli 已经优化的很好

关于路径问题，百度上有很多，就是在

修改：

这个文件下的

build : {

// Template for index.html

index : path . resolve ( __dirname , ' ../dist/index.html ' ) ,

// Paths

assetsRoot : path . resolve ( __dirname , ' ../dist ' ) ,

assetsSubDirectory : ' static ',

assetsPublicPath : ' / ', // ==> './'

确实能将打包以后的资源路径指向打包以后的文件夹。但是我使用静态文件路径的却拿不到

   imgSrc 
  : [ 
 
 
  ' 
  /static/img/footer/tab11.png 
  ' 
  , 
 
 
  ' 
  /static/img/footer/tab21.png 
  ' 
  , 
 
 
  ' 
  /static/img/footer/tab31.png 
  ' 
 

   ] 
 

这种路径的一个算一个，都拿不到。

然后看打包以后的文件结构，发现只需要在路径变成相对路径

   imgSrc 
  : [ 
 
 
    
  ' 
  . 
  /static/img/footer/tab11.png 
  ' 
  , 
 
 
  ' 
  ./static/img/footer/tab21.png 
  ' 
  , 
 
 
  ' 
  ./static/img/footer/tab31.png 
  ' 
 

   ] 
 

就能拿到。

但是当我修改标签上的 static（不要问我为什么要在标签上使用 static 文件里的东西，当时脑抽）

为

 
 < 
 img 
   
 slot 
 = 
 " 
 icon 
 " 
   
 src 
 = 
 " 
 ./static/img/footer/tab4.png 
 " 
 > 

结果报错了。。。打包也会报一堆错

然后想着既然这样，索性破罐子破摔，把这个改成绑定的属性

 
 < 
 img 
   
 slot 
 = 
 " 
 icon 
 " 
   
 : 
 src 
 = 
 " 
 '. 
 /static/img/footer/tab4.png 
 ' 
 " 
 > 

就能拿到了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^