Vue.js中如何用变量作为图片src？图片加载失败求助

一、先修正模板语法错误 #

你之前的模板写法存在几个问题：

• 放弃 <img :src = {{data}}} 或 <img src = {{data}}> 这类写法，Vue的属性绑定不需要双大括号，直接用 :src="data" 即可，:src 是v-bind的缩写，内部可直接识别响应式变量。
• <img v-bind:src=getimg()> 会反复触发函数调用，没必要，直接绑定变量更高效。

二、核心解决动态资源路径问题 #

在Tauri搭配的Vite环境中，require 并不适用，需要用 new URL() 来处理静态资源路径，才能保证变量更新时图片正常加载。

正确代码示例 #

<template>
  <!-- 直接绑定处理好的图片URL -->
  <img :src="imageUrl" alt="动态图片">
</template>

<script setup>
import { ref, watch } from 'vue'

// 初始化图片路径，和你之前的定义一致
const data = ref("./assets/4168-376.png")
// 生成正确的资源URL
const imageUrl = ref(new URL(data.value, import.meta.url).href)

// 监听data的变化，自动更新图片地址
watch(data, (newPath) => {
  imageUrl.value = new URL(newPath, import.meta.url).href
})

// 这里放你的Tauri函数调用，示例：
// invoke('你的Tauri函数名').then(res => {
//   data.value = res返回的图片路径
// })
</script>

三、关键细节说明 #

• new URL(path, import.meta.url)：Vite依靠这个方法解析相对路径，打包后资源路径不会出错，比require更可靠。
• watch监听：当Tauri函数更新data的值后，watch会自动触发重新生成图片URL，实现图片动态切换。
• 如果Tauri返回的是本地系统绝对路径（比如C:/xxx/xxx.png），直接把该路径赋值给:src即可，无需new URL，Tauri允许加载本地文件系统资源。

四、额外排查点 #

• 确认图片确实存在于./assets目录下，路径不要写错。
• 检查Tauri函数返回的路径格式，确保是字符串类型，没有多余空格或转义字符。

内容的提问来源于stack exchange，提问作者Findlay Bannatyne