使用react 引入相对路径文件

如何用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 语法导入,并且路径是相对于组件文件的。
相关推荐
β添砖java39 分钟前
CSS网格布局
前端·css·html
木易 士心2 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博2 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中3 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭3 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享3 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom3 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室3 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣3 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻3 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app