vue3项目本地src图片渲染不显示问题

### 实现 Vue3 中通过 `v-for` 循环渲染本地图片数组 为了在 Vue3 应用程序中实现本地图片的循环渲染，可以通过定义一个包含图片路径的对象数组来完成此功能。下面是一个具体的例子： #### 定义图片数据源 创建一个响应式的对象数组，其中每个对象代表一张图片的信息。 ```javascript import { ref } from &#39;vue&#39;; const images = ref([ { id: 1, path: &#39;/src/assets/image1.jpg&#39; }, { id: 2, path: &#39;/src/assets/image2.png&#39; }, { id: 3, path: &#39;/src/assets/image3.gif&#39; } ]); ``` 这里使用了 `ref()` 来使 `images` 成为一个响应式变量[^2]。 #### 渲染 HTML 结构 利用 `v-for` 指令遍历上述的数据源并生成对应的 `<img>` 标签显示图片。 ```html <div> <ul> <li v-for="image in images" :key="image.id"> <!-- 动态绑定 src 属性 --> <img :src="require(image.path)" alt="" /> </li> </ul> </div> ``` 注意，在实际项目里，如果图片位于公共目录下，则可以直接指定相对 URL 路径；但如果是在模块作用域内的资源文件夹（如 `/src/assets/`），则需借助 Webpack 的 `require()` 函数加载这些静态资源[^1]。 此外，对于每一项都指定了唯一的键值 (`id`) 给予 `:key` 属性，这有助于提高组件更新效率以及确保 DOM 元素的一致性。