使用react 引入相对路径文件

小姐姐呀～2025-03-28 18:24

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

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

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

javascript 复制代码

若路径是下面这样
src/
  assets/
    image.png
  components/
    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 文件夹下，并使用相对路径访问。

javascript 复制代码

// 假设你有以下目录结构：
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 语法导入，并且路径是相对于组件文件的。