这是一个在前端项目中非常常见的问题。本地开发环境（通常是 npm run dev 或 yarn dev）和线上生产环境（npm run build 或 yarn build）对静态资源（如图片、字体等）的处理方式不同，这导致了路径差异。
问题根源
本地开发服务器 (Dev Server): 当你运行 npm run dev 时，会启动一个本地开发服务器。这个服务器能理解你的源代码结构，当你使用像 /src/assets/404.png 这样的路径时，它知道去哪里找到这个文件并正确地提供给浏览器。它在内存中处理这些文件，并且路径解析非常灵活。
生产构建 (Production Build): 当你运行 npm run build 时，Vite或Create React App (CRA)等构建工具会打包和优化你的代码。这个过程包括：
- 代码压缩 (Minification): 减小JS和CSS文件的大小。
- 文件哈希 (Hashing): 给文件名添加一个独特的哈希值（例如 404.a1b2c3d4.png），这样浏览器就不会加载旧的缓存文件。
- 目录重构: 将所有需要发布的文件（HTML, JS, CSS, 图片等）复制到一个统一的输出目录（通常是 dist 或 build）。
在这个过程中，src 目录本身并不会被原样复制到 dist 目录中。因此，当你的线上代码尝试访问 /src/assets/404.png 时，服务器上根本不存在这个路径，导致404错误。
解决方案
为了确保图片在本地和线上都能正确显示，你应该采用以下几种标准方法之一：
方案一：使用 import 导入图片（推荐）
这是在React组件中最推荐和最可靠的方法。构建工具会处理好一切。
操作步骤：
- 将图片文件（例如 404.png）放在 src/assets 目录下。
- 在你的React组件中，像导入一个模块一样导入这张图片。
- 将导入的变量用在 <img> 标签的 src 属性中。
import React from 'react';
import notFoundImage from '/src/assets/404.png'; // 关键步骤：导入图片
function NotFoundPage() {
return (
<div>
<h1>页面未找到</h1>
{/* 将导入的变量作为 src */}
<img src={notFoundImage} alt="404 Not Found" />
</div>
);
}
export default NotFoundPage;优点：
- 构建时检查: 如果图片路径错误，项目在构建时就会报错，可以提前发现问题。
- 自动优化: 构建工具会自动处理这张图片，包括添加哈希值、优化大小，并把它放到最终的 dist 目录中。
- 无需关心路径: 你不需要担心最终的线上路径是什么，构建工具会为你生成正确的URL。
方案二：使用 public 文件夹
如果某些图片不需要经过构建工具的处理（例如，你希望保持原始文件名不变，或者图片是通过URL动态引用的），可以把它们放在 public 文件夹中。
操作步骤：
- 在你的项目根目录下找到（或创建）public 文件夹。
- 将图片（例如 404.png）直接放入 public 文件夹。
- 在代码中，使用相对于根目录的绝对路径来引用它。
import React from 'react';
function NotFoundPage() {
return (
<div>
<h1>页面未找到</h1>
{/* 直接使用绝对路径，假设图片在 public/404.png */}
<img src="/404.png" alt="404 Not Found" />
</div>
);
}
export default NotFoundPage;注意：
- public 文件夹中的文件会被原封不动地复制到 dist 目录的根部。
- 这种方式不会对图片进行哈希命名或优化。
- 如果路径写错，只会在浏览器中看到404错误，构建时不会提示。
发表评论
全部评论 (0)