vue-webpack打包后图片找不到

一、问题描述

项目在使用webpack打包后，很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。

二、异常原因

1.图片未被打包

当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。

2.图片路径错误

当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不会将其二次转译为打包后相对路径。

三、解决方案

使用require语法引入图片，在dev或build环境会自动进行路径拼接。

<img :src="url" />

url () {
  return require(`@/assets/${this.article.code}.jpg`)
}

idea from github-vue-issues #202

END