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>