阿里云建站套餐旅游网站排行榜前十名官网

如何用React加载一个带有相对路径的静态文件

方法一：若文件在 src 文件夹中（适用于打包文件）

当你将静态文件放置在 src 文件夹内时，可以使用 import 语法将它们导入到组件中。Webpack 会将这些文件打包到最终的输出中。

若路径是下面这样
src/assets/image.pngcomponents/MyComponent.js
你可以像这样导入和使用图片：
import React from 'react';
import image from '../assets/image.png';  // 相对路径导入const MyComponent = () => {return (<div><img src={image} alt="Description" /></div>);
};export default MyComponent;

方法 2：在 public 文件夹中使用相对路径（适用于不需要打包的文件）

如果你的文件不需要通过 Webpack 打包，而是直接访问的文件，你可以将它们放在 public 文件夹下，并使用相对路径访问。

// 假设你有以下目录结构：
public/assets/image.png
src/components/MyComponent.js// 你可以在组件中使用以下方式引用图片：
import React from 'react';
const MyComponent = () => {return (<div><img src="/assets/image.png" alt="Description" /></div>);
};
export default MyComponent;
// 注意，这里的路径 /assets/image.png 是相对于 public 文件夹的路径，而不是相对于 src 文件夹。

小结（圈重点！！！）

• 放在 public 文件夹中的静态资源：路径应该以 / 开头，如 /assets/image.png。
• 放在 src文件夹中的资源：可以通过 import 语法导入，并且路径是相对于组件文件的。