vue3 v-for渲染image

### Vue3 中使用 `v-for` 指令渲染图像

在 Vue3 项目中，可以利用 `v-for` 指令遍历数组或对象列表，并结合 `v-bind:src` 动态设置 `<img>` 标签的 `src` 属性来展示多张图片。

下面是一个简单的例子说明如何实现这一功能：

<div id="app">
  <!-- 使用 v-for 遍历 images 数组 -->
  <ul>
    <li v-for="(image, index) in images" :key="index">
      <!-- 动态绑定 img 的 src 和 alt 属性 -->
      <img :src="image.url" :alt="image.alt" />
    </li>
  </ul>
</div>

<script>
import { createApp } from 'vue';

const App = {
  data() {
    return {
      // 图像数据源
      images: [
        { url: './path/to/image1.jpg', alt: 'Description of Image 1' },
        { url: './path/to/image2.png', alt: 'Description of Image 2' }
      ]
    };
  }
};

createApp(App).mount('#app');
</script>

此代码片段展示了如何通过定义一个包含多个图像路径的对象数组，在模板里运用 `v-for` 来迭代这些条目并创建相应的 HTML 结构[^3]。注意这里还加入了 `:key` 属性用于提高组件更新效率和性能优化[^4]。