vue3：加载本地图片等静态资源
在Vue 3中，加载本地图片等静态资源可以通过以下方式进行：
- 将静态资源放在公共文件夹（如
public文件夹）。 - 使用
import或require来引入图片资源作为模块。 - 在模板中使用
<img>标签和绑定的src。
例如，如果你有一张图片放在 public/images 文件夹下，名为 example.png，你可以这样加载它：
<template>
<img :src="imageSrc" alt="Example Image" />
</template>
<script setup>
import { ref, onMounted } from 'vue';
const imageSrc = ref('');
onMounted(() => {
imageSrc.value = new URL('../images/example.png', import.meta.url).href;
});
</script>或者，如果你想直接在模板中使用静态资源：
<template>
<img src="/images/example.png" alt="Example Image" />
</template>请确保在 vite.config.js 或 vue.config.js 中正确配置了静态资源的路径。通常，Vite 和 Vue CLI 会自动处理 public 文件夹中的静态资源。
评论已关闭