使用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 语法导入,并且路径是相对于组件文件的。
相关推荐
HashTang9 分钟前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李1 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh3 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒4 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐5 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖5 小时前
Webpack系列-Entry入口
前端·webpack