vue项目中src引入相对路径的图片不显示问题

如下所示：

<template>
  <img :src="img" alt="">
</template>
export default {
  data () {
   img: './logo.png'
  }
}

这样动态引入图片，在页面会显示不出, 在这里有两种方法可以解决，造成这种现象的原因，我最后会说明

解决方法

第一种：直接 import 导入图片

<template>
  <img :src="img" alt="">
</template>
import img from './logo.png'
export default {
  data () {
   img
  }
}

第二种方法： 将图片放到静态资源目录下 也就是 static 文件夹下，然后引入相对路径，也可以完美规避这种问题

好了，说了解决方法，下面来看看造成这种情况的原因，先了解一下 下面两个文件夹
assets: 一般我们会将图片，字体图标放到该文件夹下，在项目编译的过程中，该文件夹会被webpack处理解析为模块依赖，只支持相对路径形式。build的时候由Webpack解析为模块依赖。

static：该文件夹一般放置一些静态资源（第三方文件），这个目录下的文件不会被webpack处理，不会被webpack解析，它会直接放到最终的打包目录之下，一般没有做任何更改的情况下会在dist/static下。所以必须使用相对路径引用这些文件，这里是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/下的文件都是需要以相对路径的形式引入。

根据webpack的特性，放在static下的文件是不会变动的静态资源，asserts下放可能会变动的文件

总结一下原因：在动态加载的情况下，webpack会将图片当做模块来用，所以url-loader无法解析图片的相对路径，导致路径丢失，显示不出图片。