解决VUE3 Vite打包后动态图片资源不显示问题

最新推荐文章于 2025-06-11 14:47:12 发布

原创最新推荐文章于 2025-06-11 14:47:12 发布 · 921 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

vue3 专栏收录该内容

7 篇文章

订阅专栏

解决VUE3 Vite打包后动态图片资源不显示问题

<script setup>
let url = ref('')
 
const setimg = (item)=>{
 let src = `../assets/image/${e}.png`
 url.value = src
}
 
</script>
 
 
<template>
    <div v-for="item in 6">
        <h1 @click="setimg(item)">{{ item }}</h1>
    </div>
    <img :src="url" alt="">
    <img src="" alt="">
</template>

原因：Vite打包时不会打包以模板字符串包裹的图片相对路径，所以vite不知道此处要用哪个图片

方法一将静态资源放到pbulic文件中 （最简单有效）
方法二通过import 逐个导入图片资源

import one from '../assets/image/1.png'
import two from '../assets/image/2.png'

方法三在函数中动态导入

const setimg = async (e)=>{
    // 动态引入
    console.log(e);  //图片名
  let src = await import(`../assets/image/${e}.png`);
    url.value = src.default
}

 <img :src="getdiimg1()" alt="" class="cardimg" />
const getdiimg1 = () => {
  // return `/src/assets/imgs/card${state.tabIndex}.png`; 图片文件放在assets 不生效 
  return `/card${state.tabIndex}.png`; // 把图片移到public文件下
};