Vue3中如何将自定义HTML属性绑定到资源？当前代码无法生效

嘿，你的代码问题主要出在两个地方：一是new URL生成的是URL对象而非字符串路径，二是Vite环境下解析资源路径需要额外的参数。我给你两种可行的解决方案：

方案一：使用URL对象的href属性 #

你需要访问URL对象的href属性来获取字符串形式的完整路径，同时记得给new URL加上第二个参数import.meta.url，这样Vite才能正确解析@别名对应的资源位置：

<template>
  <span :data-imageurl="logo.href" />
</template>

<script setup>
// 加上import.meta.url作为基准URL，确保资源路径解析正确
const logo = new URL("@/assets/img/logo.png", import.meta.url);
</script>

方案二：直接导入静态资源（更简单） #

Vite支持直接导入静态资源，导入后会自动返回可以直接使用的路径字符串，这样就不需要手动处理URL对象了：

<template>
  <span :data-imageurl="logo" />
</template>

<script setup>
// 直接导入资源，logo就是字符串类型的路径
import logo from "@/assets/img/logo.png";
</script>

为什么原代码不工作？ #

• new URL创建的是一个URL对象，当你直接把它绑定到data-imageurl时，Vue会把对象转换成字符串[object URL]，这显然不是你需要的图片路径。
• 缺少import.meta.url参数的话，Vite无法正确解析@别名对应的相对路径，导致资源定位失败。

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