当我们用v-bind动态绑定<img>标签的src属性时，加载static文件夹中的图片可以正常显示,但是的加载的assets文件夹中的图片就不行了，但是非动态绑定的src属性,却可以加载assets资源文件夹下的图片,反正就离谱！
大坑写法
<template>
<img :src="url" />
</template>
<script>
export default {
name: "Img",
props: {
url: {}
}
};
</script>
解决方案
最后查看了一些文章大概是这样说的，图片在assets文件夹中的情况：在项目编译的过程中会被webpack处理解析为模块依赖webpack中会将其中图片当做模块来用，加载图片模块好像就是得通过webpack的url-loader加载器来实现，然后url-loader好像是解析不了动态绑定的src的导致最终显示的地址是未处理的地址（也就是我说的地址还是一个相对地址） 因此动态绑定src时要通过加载模块的方式去加载这个图片 使用require(“ ”)
图片在static文件夹中的情况：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。 将图片放到static目录下，当做第三方文件加载不让webpack去处理他，引用的时候写成绝对路径 因此动态绑定src时直接写static目录下的绝对路径
<template>
<img :src="require(`@/assets/img/${url}`)"/>
</template>
<script>
export default {
name: "Img",
props: {
url: {}
}
};
</script>
