Vue3 加载本地图片等静态资源指引, Vue3 如何轻松加载本地图片！

静态资源管理概述

在使用Vue3进行Web开发时，正确加载并显示本地图片和其他静态资源是至关重要的。无论是用于组件内部的背景图像、logo图标还是其他类型的图像文件，都需要确保这些静态资源能够被应用程序有效访问和渲染。

使用public目录加载图片

目录结构说明

Vue CLI创建的项目中，默认存在一个名为public的目录。这是存放非编译文件的理想位置，例如一些需要直接访问的图片、字体等资源。将图片放入该目录后，可以直接通过相对路径引用它们。

操作步骤：

1. 将图片文件放置于public/images（假设该目录已创建）下。
2. 在模板中使用绝对路径或相对于index.html的路径来访问这些图片。

示例代码：

<!-- 在public/images/目录下的image.png -->
<img src="/images/image.png" alt="示例图片">

使用场景

适合不需要通过Webpack进行处理的静态资源，如小图标、背景图等。这种方式加载速度快，且对开发效率有显著提升。

通过src/assets加载图片

资源编译与优化

Vue CLI项目中的src/assets目录通常用于存放需要被Webpack打包和优化的静态文件。这使得资源可以根据生产环境进行相应的压缩、缓存等处理，确保最佳性能表现。

操作步骤：

1. 将图片放入src/assets/images/（假设该子目录已创建）。
2. 使用相对路径在组件模板中引用这些图片资源。

示例代码：

<template>
  <div>
    <!-- 直接引用 -->
    <img :src="require('@/assets/images/image.png')" alt="示例图片">
  </div>
</template>

<script setup lang="ts">
// 或者在脚本中
import image from "@/assets/images/image.png"
console.log(image);
</script>

使用场景

适合需要进行预处理或优化的资源，如SVG图标、高清大图等。这种做法有助于提升应用性能和用户体验。

其他注意事项

• 文件路径错误：确保引用的图片路径正确无误。
• 缓存问题：在开发过程中注意清除浏览器缓存以避免加载旧版本的静态资源。
• 安全性建议：对于公开上传的图片，考虑实施安全检查或过滤机制。

总结

Vue3提供了灵活的方式让开发者轻松管理静态资源。通过合理利用public和src/assets目录，不仅可以有效提升开发效率，还能确保应用程序在不同环境下保持最佳性能表现。