网站利润分析深圳网站制作 优选灵点网络

在 Vue 3 中动态加载图片失效通常是由于构建工具（如 Vite 或 Webpack）对资源路径处理机制导致的。
静态路径会被构建工具处理，但动态路径不会自动解析，导致最终路径错误

//能正常显示
<imgsrc="@/assets/image/xx"alt=""/>//不能正常显示
<img:src="imgUrl"alt=""/>
const imgUrl='@/assets/image/xx.png';

解决方法1：

在页面中import图片信息，即可在页面中使用

<img:src="imgUrl"alt=""/>import imgUrlfrom "@/assets/image/xx.png";

解决方法2：使用 new URL（推荐 - Vite 官方方案）

<template><img :src="getImageUrl('image-name.png')" alt="动态图片">
</template><script setup>
const getImageUrl = (name: string) => {
//使用相对路径,绝对路径无效（'/src/assets/image.png'） return new URL(`./assets/${name}`, import.meta.url).href
}
</script>

解决方法3：将图片放入 public 目录

<template><!-- 直接使用绝对路径 -->//<img :src="`/images/${imgName}`" alt="动态图片">//试了下直接赋变量即可实现img :src="imgName" alt="动态图片">
</template><script setup>
const imgName = 'image-name.png'
</script>