Vue在data中引入图片路径【动态引入】

背景

在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正常引入图片了。