#VUE图片路径别名设置和图片的引用:

我们在使用vue书写代码是,引用静态图片路径的地址是经常发生一种业务场景,

<img src="@/assets/images/red@2x.png" alt="">

每次写代码的时候都要“@//////”好多层,为了书写方便,在vue里可以给路径“@/assets/images”设置别名来节省输入代码的次数。

1、在项目根路径新建vue.config.js文件:

然后在文件里输入下面的代码:

let path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
    //*输入个格式
      .set('@',resolve('src'))
      //*给图片路径设置别名
      .set('img',resolve('src/assets/images'))
  }
}

2、重启编译器

3、在项目中使用别名(有坑)

①在template直接引入图片的时候:

如果想下面代码直接使用:

<img src="img/tip-red@2x.png" alt="">

发现页面没有渲染图片,打开控制台发现字符串"img/tip-red@2x.png"没有得到解析:

1566538973(1).jpg

发现在template中需要这样写:

<img src="~img/tip-red@2x.png" alt="">

发现路径得到了解析:

1566539387(1).jpg

②在data里面赋值,然后动态获取图片的时候,图片路径必须要用require()包裹起来,代码如下:

enterpriseApp:[
            //*此处需要注意字符串"img/jiankong.png"中不需要加”~“
            {id:1,title:"监控",img:require("img/jiankong.png")},
            {id:2,title:"灰名单",img:require("img/huimingdan.png")},
            {id:3,title:"报告",img:require("img/baogao.png")},
            {id:4,title:"CRM",img:require("img/CRM.png")},
            {id:5,title:"评估",img:require("img/pinggu.png")},
        ],

页面渲染只需要vue的正常语法即可。

<img :src="item.img" alt="">

之后写项目的时候就可以愉快的使用别名,

简单快捷,省下了很多时间来保养头发~~~~

推荐阅读更多精彩内容