Vue.js 如何正确引用图片地址?

问题描述

问 题

这样是没问题的：

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

但是我把地址提取出来，当道 data 里，就引用不到了：

<img :src="logoSrc" >

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

这是为啥？

解决方案

放在模版里是会被 webpack 打包出来 所以可以
而在 js 里写图片路径其实只是字符串 webpack 不会处理
如果想这么做 你可以把图片放在最外层的 static 文件夹
或使用 import require 引入

这篇关于Vue.js 如何正确引用图片地址?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！