vue cli3 如何绑定图片src属性

升级到3之后，静态的文件都统一存放在public目录下，但是这个目录下，你在index.html的时候很好引入，在组件中，就不行了，因为webpack打包后路径就变了，所以我们要使用一个动态的参数。

动态参数绑定

这种情况一般出现在我们用v-for遍历一个对象，在对象里面会有对于的图片的地址，但是这个地址一般来说可能只写图片的名字，因为路径是一样的，直接在遍历的时候统一就行了，但是这个时候我们会发现地址是失效的。

<img v-for="item in imgarr" :src="'../../images/'+item.src">

虽然这样写可以拼接成一条地址，但是这个地址是无法正常读取到的，甚至于我们使用@/来表示src目录，然后访问目录下的assets目录下的图片，如：

<img v-for="item in imgarr" :src="'@/assets/images/'+item.src">

这样你会发现渲染出来并不是我们想象中的那般美好：

<img src="@/assets/images/xxx.png">

vue把@符号也作为字符串了，这就很容易明白，我们不能在使用这些特殊语义的符号时使用拼接，因为会将它直接转换为string，失去了效果，那么怎么办呢？

这里我就说下怎么利用动态参数绑定public目录

data(){
  return {
    publicPath: process.env.BASE_URL
  };
}

data创建一个参数publicPath

<img v-for="item in imgarr" :src="`${publicPath}images/${item.src}`">

利用es6语法，``符号里利用$符号和{}大括号将参数传入，这里${publicPath}可以理解为 public/目录，他是有带反斜杠的，所以记得后面不要接反斜杠，然后再将for循环出来的图片名参数传入，然后大功告成。

import引入

假如我要引入assets目录中的图片再绑定怎么办，很简单，和引入组件一样引入图片。

假设我有一张名为01.jpg的图片再assets目录下的images文件夹中

import img01 from "@/assets/images/01.jpg"

img01 为自定义的名字，此时图片就会被正确引入，然后我们还要调用

data(){
  return {
    imgSrcs: [
      {title:"图片1",src:img01}
    ]
  };
}

将img01 作为路径参数丢给数组中

然后在v-for循环中正常调用item.src就行了。

以上就是两个关于绑定本地图片的方法。