Vue3 中使用 v-for 循环渲染 img 标签本地图片
时间: 2025-06-24 12:44:09 浏览: 16
### Vue3 中使用 `v-for` 循环渲染本地图片的 `img` 标签
在 Vue3 中,如果要通过 `v-for` 渲染本地图片到 `<img>` 标签中,则需要注意如何正确引入和引用这些静态资源文件。通常情况下,本地图片会被放置在项目的 `public` 或者 `src/assets` 文件夹下。
以下是具体实现方法:
```vue
<template>
<div>
<!-- 使用 v-for 遍历 localImages 数组 -->
<img
v-for="(imagePath, index) in localImages"
:key="index"
:src="require(`@/assets/images/${imagePath}`)"
:alt="'Local Image ' + (index + 1)"
class="local-image"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 定义一个包含本地图片名称的字符串数组
localImages: ['image1.png', 'image2.png', 'image3.png']
};
}
};
</script>
<style scoped>
.local-image {
width: 150px;
height: auto;
margin: 5px;
}
</style>
```
#### 解析
- **数据结构定义**:在组件的 `data()` 函数中定义了一个名为 `localImages` 的数组[^4],它存储的是本地图片文件名(不带路径前缀)。假设所有的图片都存放在项目根目录下的 `src/assets/images/` 文件夹里。
- **动态导入图片路径**:由于 Webpack 不会自动解析相对路径作为变量传入的情况,因此这里采用了 `require` 方法来动态获取图片的实际路径[^5]。注意这里的 `${imagePath}` 应当匹配实际存在的文件名。
- **模板语法**:同之前一样,我们依然借助 `v-for` 指令完成列表项的循环展示,并且为每个 `<img>` 设置了必要的属性如 `:src`, `:alt` 等[^6]。
---
阅读全文
相关推荐



















