vue组件属性中字符串如何拼接变量

Posted 2023-05-14

参考技术A <img :src="logoSrc" >export default
data () return
logoSrc: './../assets/avatar.png'

vue组件属性中字符串如何拼接变量？

不得不说，对于水平只有jquery的vue初学者来说，vue的图片加载实现确实挺坑的，在文档中也没有看到说明。经过百度之后终于知道了什么情况。

首先：

这样是没问题的：

<img src="./../assets/avatar.png" />

但是我把地址提取出来，当道 data 里之后就不行了。

<img :src="logoSrc" >

export default {
  data () {
    return {
      logoSrc: ‘./../assets/avatar.png‘
    }
  }
}

这样会报404错误。

　　原因是如果你把相对地址写在模版里，就是第一种，用webpack打包的时候，会解析地址并打包引用图片。
而在 js 里写图片路径其实只是字符串 webpack 不会处理
如果想这么做 你可以把图片放在最外层的 static 文件夹里，当然我不推荐这种做法。
　　还有一种方法就是通过 import require 引入图片。比如：

http://blog.csdn.net/fairyier/article/details/70847057

　　还有一种情况。后端传递过来的图片是不需要 require 的。如果要显示，直接在 img 的 src 设置后端返回的地址即可。

用哪种方法就看实际情况吧，图片少的话用require是蛮不错的，如果多的话，是不是会很麻烦呢。