vue-cli3 图片引用问题

一般来说我们都会将图片资源放置于 assets 文件夹中进行引用，但是当我们需要使用图片的动态路径时，会发现找不到图片资源。

 比如你会使用如下代码：

 

结果图片不能正常显示。

根据vue-cli  官方文档

那么有一种解决方法是将大量的需要使用到动态路径的图片放到 public 文件下，在vue中我们就先定义全局变量代表发布的路径

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

然后在vue文件中使用：

<img :src="`${publicPath}my-image.png`">

另外css中的图片引用可以改为引用一个资源即可，如下所示：

 .a {
       
        background: url(~/images/home/titleBg.png) no-repeat center center;
       
}