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

Question

这样是没问题的：

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

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

<img :src="logoSrc" >

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

这是为啥？

Answer 1

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

Answer 2

写在模板不出错，是因为你已经有模板的图片解析器了，在JS中需要import

import logoSrc from './../assets/avatar.png'

Answer 3

{src: require('../../assets/buy.svg')}---即可以得到图片的地址

Answer 4

utils.js中ExtractTextPlugin.extract({}),添加属性publicPath: '../../'

Answer 5

const img = require("./../assets/avatar.png");

Answer 6

https://webpack.js.org/guides...