Vue图片在为动态变量路径显示不出来怎么办 ,但是通过img标签显示正常 这是为什么?

案例

例如:
如何动态显示图片, 直接这样定义是不可以的。 这样只是把属性src赋值不能请求资源

<template>	
	<img :src="img" width="100%" height="100%" alt="">
</template>
<script>
    export default {
        name: "test",
        data(){
            return {
                img:'01.jpg'
            }
        }
    }
</script>

正确方式：需要require引入图片资源赋值给img,

<template>	
	<img :src="img" width="100%" height="100%" alt="">
</template>
<script>
    export default {
        name: "test",
        data(){
            return {
                img:require('01.jpg')
            }
        }
    }
</script>

注意

• 后端传递过来的图片就不要 require 了。

• 如果要显示，直接在 img 的 src 设置后端返回的地址即可。

• 图片是在当前项目下的话，放到 static/img 目录下，然后路径统一写成 /static/img

• 图片不是在当前项目下（如用户上传的图片），后端返回绝对路径即可