vue3 动态渲染assets的图片资源

### Vue3 动态加载 assets 文件夹内图片资源的方法

在 Vue3 项目中，为了能够动态加载位于 `assets` 文件夹中的图片资源并确保这些图片能够在打包后的生产环境中正常显示，可以采用如下方式：

当需要动态获取路径时，在 JavaScript 或 TypeScript 的逻辑部分通过相对路径来指定图片位置，并利用 Webpack 或 Vite 对模块解析的支持特性。对于 Vite 来说，可以通过 `import.meta.url` 结合 `new URL()` 构造函数创建绝对URL[^4]。

下面是一个具体的例子展示如何实现在 Vue 组件里动态绑定来自 `assets` 下的图片地址到 `<img>` 标签上：

#### App.vue 示例代码

<template>
<div>
    <h1>动态加载Assets文件夹内的图片</h1>
    <!-- 使用 v-bind 指令 (:) 将 imageSrc 数据属性绑定给 img 的 src 属性 -->
    <img :src="imageSrc" alt="动态加载">
</div>
</template>

<script setup lang="ts">
// 导入所需的工具方法或变量
import { ref, onMounted } from 'vue';

const imageSrc = ref('');

onMounted(() => {
    // 这里的 './' 表示相对于当前入口文件的位置
    const imageUrl = new URL('./assets/logo.png', import.meta.url).href;
    
    // 更新响应式的 imageSrc 变量以便视图更新
    imageSrc.value = imageUrl;
});
</script>

此段代码展示了怎样在一个基于组合 API (`setup`) 的单文件组件中定义了一个名为 `imageSrc` 的响应式状态用于存储图片的真实链接。一旦组件挂载完成，则会计算出正确的图片路径并通过调用 `new URL()` 函数将其转换为完整的 URL 字符串形式赋值给该状态对象。最后借助于模板语法中的冒号前缀(`:`)，即所谓的 “v-bind”，实现了将这个字符串表达式作为 HTML 属性传递给 DOM 元素的效果。