vue脚手架中js代码引用的图片找不到。。。

Question

在vue组件中的js代码里面引入一张放在 assets 的图片，最后这张图片不会被打包，导致热加载时候找不到这种图，但是html的img引入的图片却可以，怎么破。。

而且这个报错的地址也不对，我应该怎么写或者是要改webpack配置吗，怎么改，谢谢大家了！！！

Answer 1

JS中引用图片 一般都是import 或者require

Answer 2

问题其实很简单，你搞混了源文件和生成文件的路径。webpack最终打包出来的文件，肯定不可能引用你源文件的路径的，因此需要使用file-loader/url-loader把图片也打包到生成文件里，详情请看这里：webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？

Answer 3

新手时也遇到这问题，后来是在脚本引入。

Answer 4

js 脚本引入的图片请放到 static 目录下，并通过 /static/... 路径使用

Answer 5

vue的脚手架代码生成后，引入图片分为两种情况：

第一种情况是在html内引入。图片默认放置到assets内。脚手架代码内的app.vue引入的template内：

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

就是此情况。

第二种情况，就是我这里主要展示的——使用代码引入。也就是require函数方式。此处会需要webpack打包。具体使用方法可以这样如下。

首先创建环境，使用

vue init webpack testbed
cd testbed
npm install

在src/components/hello.vue内贴入脚本代码：

<script>
export default {
  name: 'hello',
  mounted(){
    var img = document.createElement('img');
    img.src = require('../assets/logo.png');
    document.getElementById("did").appendChild(img)
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>

然后验证：

npm run dev

此时你可以浏览器内看到vue的图标被显示了两次。

此处文档比较缺乏，所以是vue-cli用户常常容易误解或者难以适应的地方。

Answer 6

我也遇到这种问题，真的很恶心的，你使用require或者import来引入可以解决。虽然这种方法可以解决但是这种方式肯定不好的。希望有人详细解释下vue的路径的问题