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就行了。

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

0
  • 本文分类:vue 项目实战
  • 本文标签:vue绑定图片src
  • 流行热度:已超过 88 人围观了本文
  • 发布日期:2020年03月14日 - 0时17分16秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码