vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以正常引入,打包后却不能显示的问题
vue3+vite assets动态引入图片的几种方式,解决打包后图片路径错误不显示的问题
图片引入的方式1:
因为vite构建的vue3项目,无法使用require导入图片,需要处理。
方式2: (这种打包打生产环境图片加载不显示 具体原因还在摸索)
1.新建 utils/require.js 文件
export const require = (imgPath) => {
try {
const handlePath = imgPath.replace('@', '..');
// https://vitejs.cn/guide/assets.html#the-public-directory
return new URL(handlePath, import.meta.url).href;
} catch (error) {
console.warn(error);
}
};
2.组件中使用
<div class="footer">
<div class="product_title">
<img class="left" src="@/assets/images/left.png" />
<div class="title">产品介绍</div>
<img class="right" src="@/assets/images/right.png"/>
</div>
<div class="product_box">
<div class="box_info" v-for="(item,index) in imgList" :key="index">
<img class="box_left" :src="item.img" alt=""/>
<div class="box_right">
<span>{{ item.title }}</span>
<span>{{ item.info }}</span>
</div>
</div>
</div>
</div>
setup() {
const imgList = reactive([
{
img: require(`@/assets/images/tubiao1.png`),
title:'申请简单',
info:'最快15分钟完成',
},
{
img: require(`@/assets/images/tubiao2.png`),
title:'安全保障',
info:'绝不泄露信息',
},
])
const getCode = async()=>{
const res = await getCodeImg()
console.log(res);
}
return {getCode,imgList};
},