Vue 添加图片

配置vue.config.js

 config.module
      .rule('images')
      .test(/\.(png|jpe?g|JPG|gif|svg|jpg)(\?.*)?$/)//根据需要添加
      .use('url-webpack-loader')
      .loader('url-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()

第一次运行时总提示我缺少合适的loader，所以配置了上面这段，配置过后可以顺利运行了。
但是第二天打开项目后一直提示我url-webpack-loader 找不到，需要下载，可是下载后还是没有提示找不到。没办法只好把上面这一段话注释掉，不知道为什么注释掉之后又可以运行了。

引入图片

引入本地图片

1.import导入

<img :src="img1">

<script>
//导入
import pic1 from './../../icons/img/test1.png'

export default {
  name: 'Dashboard',
  data() {
  	return {
  		img1: pic1
  	}
  }
}
</script>

2. 用require()方式

<img :src="img1">

<script>
export default {
  name: 'Dashboard',
  data() {
  	return {
  		img1: require('@/icons/img/344.jpg')
  	}
  }
}
</script>

引入网络图片

<img src="https://profile.csdnimg.cn/A/0/3/3_sinat_35282516">
//直接填地址，这里src前面没有：