Vue3照片本地渲染不显示 以及照片显示失败

明明img图片在同一路径下 且路径未发生错误为什么会照片打不开

在控制台点击图片切换按钮却可以切换

这是因为路径不对

<template>
    <button @click="index--" v-if="index != 0">上一页</button>
    <div>
        <img :src="list[index]" alt=""/>
    </div>
    <button @click="index++" v-if="index != list.length-1">下一页</button>
</template>
<script>
export default{
    data(){
        return{
            list:[
                './img/1.gif',
                './img/2.gif',
                './img/3.gif',
                './img/4.gif'
            ],
            index:0
        };
    }
}
</script>
<style>

</style> 

 

图片不显示原因及解决方法：assets在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，所以要用相对路径src引入

<template>
    <button @click="index--" v-if="index != 0">上一页</button>
    <div>
        <img :src="list[index]" alt=""/>
    </div>
    <button @click="index++" v-if="index != list.length-1">下一页</button>
</template>
<script>
export default{
    data(){
        return{
            list:[
            'src/components/img/1.gif',  
            'src/components/img/2.gif',  
            'src/components/img/3.gif',
            'src/components/img/4.gif'  
            ],
            index:0
        };
    }
}
</script>
<style>

</style>

现在就可以正常显示了

文章参考：vue3项目本地src图片渲染不显示问题_vue3中图片为什么不显示-CSDN博客