在V-for循环中灵活使用require或import关键字引入本地图片

2023-10-19 14:48:27

在Vue.js中，我们可以通过<img>标签来显示图片。一般来说，我们需要先将图片文件上传到服务器，然后在<img>标签的src属性中指定图片的URL地址。但是，如果我们想在V-for循环中显示一组图片，就需要使用require或import来引入本地图片。

使用require引入本地图片

require关键字是Node.js中的一个内置模块，它允许我们从本地文件系统中加载模块。在Vue.js中，我们可以使用require关键字来引入本地图片。

// 在组件中引入本地图片
const imgUrl = require('./assets/images/image.png');

// 在V-for循环中使用require引入本地图片
<template>
  <div>
    <ul>
      <li v-for="item in items">
        <img :src="require('./assets/images/' + item.image)">
      </li>
    </ul>
  </div>
</template>

在上面的代码中，我们首先在组件中使用require关键字引入了本地图片image.png，然后在V-for循环中使用了require关键字来引入每张图片的URL地址。这样，我们就能够在V-for循环中显示一组图片了。

使用import引入本地图片

import关键字是ES6中引入模块的语法，它与require关键字类似，但语法更加简洁。在Vue.js中，我们也可以使用import关键字来引入本地图片。

// 在组件中引入本地图片
import imgUrl from './assets/images/image.png';

// 在V-for循环中使用import引入本地图片
<template>
  <div>
    <ul>
      <li v-for="item in items">
        <img :src="import('./assets/images/' + item.image)">
      </li>
    </ul>
  </div>
</template>