在现代前端项目中，图片和图标是不可或缺的视觉元素。vue 3 项目中加载这些资源有多种方式，理解它们的原理和适用场景对于优化开发流程和项目性能至关重要。本文将详细介绍如何在 vue 3 项目中有效地处理静态图片和 svg 图标。
1. 静态图片资源加载
Vue CLI (基于 Webpack) 和 Vite 构建的 Vue 项目在处理静态资源时有不同的默认行为，但核心概念相似。图片资源通常可以放置在 public 目录或 src/assets 目录中。
1.1 通过 public 目录加载
public 目录下的资源在构建时不会被 Webpack 或 Vite 处理，它们会直接被复制到最终的输出目录。这意味着这些资源可以通过根路径直接访问。
适用场景：
- 需要保持原始文件名的资源。
- 体积较大，不希望被 Webpack/Vite 处理的资源。
- 在 HTML (如 index.html) 中直接引用的资源。
示例代码：
立即学习“前端免费学习笔记（深入）”；
假设您的 public 目录下有一个 images/logo.png。
<!-- 在 Vue 组件中 -->
<template>
<div>
<!-- 直接使用相对于网站根目录的路径 -->
<img src="/images/logo.png" alt="Company Logo" />
<!-- 推荐使用 base URL，确保在不同部署环境下路径正确 -->
<img :src="`${base}/images/logo.png`" alt="Company Logo" />
</div>
</template>
<script setup>
// Vite 环境下获取 base URL
const base = import.meta.env.BASE_URL;
// Vue CLI (Webpack) 环境下获取 base URL
// const base = process.env.BASE_URL;
</script>注意事项：
- 路径是相对于网站根目录的，而非组件文件。
- 在生产环境中，如果应用部署在子路径下，需要确保路径前缀正确。import.meta.env.BASE_URL (Vite) 或 process.env.BASE_URL (Vue CLI) 可以帮助您动态获取基础路径。
1.2 通过 src/assets 目录加载
src/assets 目录下的资源会被构建工具（Webpack 或 Vite）处理。这意味着它们可能会被哈希命名、压缩或内联，以优化加载性能。
适用场景：
- 组件特有的图片资源。
- 需要进行优化（如压缩、缓存 busting）的图片。
- 需要通过 JavaScript 动态引用的图片。
示例代码：
立即学习“前端免费学习笔记（深入）”；
假设您的 src/assets/images/background.jpg。
方法一：直接在模板中引用
<template>
<div>
<!-- Webpack/Vite 会处理这个路径 -->
<img src="../assets/images/background.jpg" alt="Background Image" />
</div>
</template>方法二：通过 JavaScript 导入并绑定
这种方式在需要动态图片路径或将图片作为背景图时特别有用。
<template>
<div class="hero-section" :style="backgroundImageStyle">
<img :src="dynamicImage" alt="Dynamic Image" />
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import staticImage from '../assets/images/background.jpg'; // 静态导入
// 动态图片示例
const dynamicImageName = ref('another-image.png'); // 假设 src/assets/images/another-image.png
const dynamicImage = computed(() => {
// Vite 环境：使用 new URL 构造器来处理动态路径
return new URL(`../assets/images/${dynamicImageName.value}`, import.meta.url).href;
// Webpack 环境：使用 require 表达式（注意：Webpack 5+ 推荐使用静态导入）
// return require(`../assets/images/${dynamicImageName.value}`);
});
// 作为背景图的示例
const backgroundImageStyle = computed(() => ({
backgroundImage: `url(${staticImage})`
}));
</script>
<style scoped>
.hero-section {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
}
</style>注意事项：
- Webpack/Vite 会将导入的图片路径转换为处理后的 URL。
- 对于动态图片路径，需要使用特定的语法（如 Vite 的 new URL(..., import.meta.url) 或 Webpack 的 require()）来确保构建工具能够正确解析。直接拼接字符串不会触发构建工具的资源处理。
2. SVG 作为组件的使用
SVG (Scalable Vector Graphics) 因其可伸缩性、小文件大小和可编程性而成为图标的理想选择。在 Vue 3 项目中，将 SVG 作为组件使用可以带来更大的灵活性和可维护性。
