Vue 3 中引入图片的方法

随着 Vue 3 的发布以及 Vite 构建工具的流行，Vue 应用程序的开发方式也在不断变化。在 Vue 2 中，我们通常使用 Webpack 的 require 函数来引入图片资源。然而，在 Vue 3 中，Vite 成为了默认的构建工具，它不再支持 require 的语法。本文将详细介绍在 Vue 3 中如何正确地引入和使用图片资源。

1. 使用 `<img>` 标签引入静态图片

1.1 静态图片路径

在 Vue 3 中，如果你有一张图片位于项目的 public 文件夹下，你可以直接使用相对路径来引入这张图片。例如，如果你的图片位于 public/images/logo.png，你可以在组件中这样使用：

<!-- 一定到绝对路径 打包后也能看见 -->
<img src="/images/logo.png" alt="Logo">

1.2 动态图片路径

如果你需要动态地设置图片路径，可以使用 v-bind 绑定动态路径：

<img :src="logoPath" alt="Logo">

其中 logoPath 是一个计算属性或者数据属性，它的值指向图片的路径。

data() {
 return {
     logoPath: '/images/logo.png'
     }; 
}

2. 使用 `import` 语句引入图片

2.1 单独引入图片

在 Vue 3 中，你可以使用 ES6 的 import 语句来引入图片。这通常用于需要在组件中直接访问图片的情况。

import logo from "@/assets/images/logo.png";
export default {
  data() {
    return { logoSrc: logo };
  },
};

2.2 批量引入图片

如果你需要批量引入多个图片，可以使用 import 语句结合 require.context 或者使用其他工具如 glob。

import { defineComponent } from "vue";
const images = require.context("@/assets/images", false, /\.png$/);
export default defineComponent({
  setup() {
    const imageList = images.keys().map((key) => images(key));
    return { imageList };
  },
});

3. 使用 Vite 插件自动处理图片资源

3.1 配置 Vite 插件

Vite 提供了多种插件来帮助处理图片资源。例如，你可以使用 vite-plugin-vue2 或 vite-plugin-vue3 等插件来自动处理图片资源。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
    plugins: [vue()], build: {
        rollupOptions: {
            input: {
                main: 'index.html',
            },
        },
    }, optimizeDeps: {
        include: ['@/assets/images/*'],
    },
});

3.2 使用 `vite-plugin-svg-icons` 插件

如果你的应用中使用了大量的 SVG 图标，可以使用 vite-plugin-svg-icons 来将 SVG 文件转换为 Vue 组件。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgIcons from 'vite-plugin-svg-icons';
export default defineConfig({
    plugins: [vue(), svgIcons({
        iconDirs: ['src/icons/svg'], // SVG 文件所在的目录 
        symbolId: 'icon-[dir]-[name]' // 生成的 Vue 组件的名字
    })]
});

4. 总结

在 Vue 3 中引入图片的方式与 Vue 2 有所不同，主要是因为 Vite 的使用。通过上述方法，你可以轻松地在 Vue 3 应用中引入和使用图片资源。无论你是需要引入静态图片还是动态加载图片，都可以找到适合的方法。

希望这篇文章对你有所帮助！如果你有任何疑问或需要进一步的信息，请随时提问。

标签