Vue 3 中动态加载图片：使用 Vite 的两种方法

前端

2024-01-18 12:24:56

动态加载图片：Vue 3 中 Vite 的两大秘诀

在 Vue 3 时代，Vite 的出现彻底改变了前端开发的格局，它不仅是一款现代化的打包工具，也为动态加载图片带来了更多可能。本文将深入探讨使用 Vite 在 Vue 3 中动态加载图片的两种行之有效的方法。

秘诀一：require.context 纵横驰骋

require.context 函数是 Vite 的一项强大功能，它允许你动态加载符合特定条件的文件。对于图片加载来说，它的作用可谓妙不可言。

语法详解

require.context 函数需要三个参数：

路径： 需要搜索文件的目录路径。
正则表达式： 用于匹配文件名的正则表达式。
懒加载： 布尔值，指示是否懒加载文件。

示例代码

以下示例展示了如何使用 require.context 动态加载图片：

import { defineComponent } from 'vue';
import { requireContext } from 'vite-plugin-vue-export';

const imageContext = requireContext('./assets/images', /\.png$/, true);

export default defineComponent({
  setup() {
    // 使用文件名作为图片名称
    const images = imageContext.keys().map(key => key.slice(2, -4));

    return {
      images,
    };
  },
});

秘诀二：ViteJS/plugin-vue-jsx 捷径

如果你更青睐 JSX 语法，ViteJS/plugin-vue-jsx 插件将是你的不二之选。它允许你在 Vue 组件中直接使用 JSX 语法，从而简化了动态加载图片的过程。

语法详解

使用 ViteJS/plugin-vue-jsx 动态加载图片的语法非常简洁：

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const images = [
      require('./assets/images/image1.png'),
      require('./assets/images/image2.png'),
      require('./assets/images/image3.png'),
    ];

    return {
      images,
    };
  },
});