vue动态显示图片报错404的解决

vue动态显示图片报错404

<img :src="image"/>

当我们动态加载图片的时候会出现如下图错误

1.第一种可能，是你写了相对路径引起的，你需要写绝对路径

image:'../assets/image/top10-1.png'
你需要改成具体路径
image:'/src/assets/images/top10-1.png'

2.第二种解决方式你要使用require()

<img :src="require(images)"/>

3.第三种解决方式把图片放在public目录下面，但是这样虽然解决了问题，使用webpack打包的时候不会把这里面的文件打包进去。

4.如果你使用了ts 那么就无法使用require(),你可以使用import 把你的图片路径作为一个模块引进来使用

<template>
	<img :src="images"/>
</template>
<script>
	import image from '../assets/image/top10-1.png'
	export default{
		data(){
			return {
				images:image
			}
		}
	}
</script>

vue.js图片不显示 | 图片资引用 | img src 路径出错

最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。

解决方法

方案1：使用require将图片进入

写法如下：

logo: require('../asset/admin/logo.png')

然后再模板中：

<img :src="logo">

就可以了。

方案2：把图片放在static文件夹中

如下所示：

然后再data里面直接这样写

logo: '../static/images/logo.png'

就可以直接使用了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。