背景
在Vue项目中通过data设置图片路径，然后在template中引入后页面无法显示图片。
直接在页面用相同的路径引入图片，可以显示，发现页面输出如下图：
第一条：通过data引入页面的输出
第二条：同样的路径再页面直接引用
结论：在Vue里动态生成的路径无法被url-loader解析到，所以造成图片不能被解析。
思路
1、设置图片的动态路径为静态的；
2、通过import引入图片路径；
3、作为背景图片引入；
步骤
思路一：设置图片为静态路径
直接将你的图片源文件放在项目目录的static文件夹里【cli3是public文件夹里面】，然后正常引入图片路径就可以了。
Vue cli3的静态路径
template代码：
<template>
<div>
<img :src="imgList"/>
</div>
</template>
script代码：
export default {
name: 'success',
data () {
return {
imgList: '../../public/img/down.gif'
}
}
}
思路二：通过import引入图片路径
图片再项目中所在位置
script引入的代码，Template中引入同思路一
思路三：采用背景图方法，通过data将图片源路径引入，利用内联样式
这里要用引入的方式，否则url-loader无法解析到
Template中的代码部分
data () {
return {
importStyle: {
// +号后面为背景的其他地方填充为红色，图片的位置
background: `url(${require('@/assets/images/icon/project.png')})` + 'red no-repeat left center'
}
}
}
需要注意的是：在Vue里图片是通过v-bind绑定src属性的，所以template模板上的img标签并不是src=""，而是v-bind:src=""或简写为:src=""，这里一定要注意，如果写错了，无论如何都无法通过data正常引入图片了。
