当前位置：首页 > React

react如何加载本地图片

2026-03-11 09:01:18React

在 React 中，可以通过 import 直接导入本地图片文件。这种方式会将图片作为模块处理，适用于构建工具（如 Webpack）配置的环境。

import React from 'react';
import localImage from './path/to/image.jpg';

function App() {
  return <img src={localImage} alt="Local Image" />;
}

图片路径 ./path/to/image.jpg 需相对于当前文件位置。构建工具会自动处理路径和优化文件。

对于需要动态加载图片的场景，可以使用 require 语法。注意 require 的路径需为静态字符串（不能使用变量拼接），否则构建工具可能无法正确解析。

function App() {
  return <img src={require('./path/to/image.png')} alt="Local Image" />;
}

若需动态选择图片，可将不同图片的路径预先定义为静态字符串，再通过条件逻辑选择。

将图片放置在 public 目录下，通过绝对路径直接引用。这种方式跳过构建工具处理，适合无需优化的静态资源。

function App() {
  return <img src="/images/logo.png" alt="Public Image" />;
}

图片需放在项目根目录的 public/images 文件夹中。注意路径以 / 开头，指向 public 目录。

对于小图片，可转换为 base64 格式直接嵌入组件中，减少 HTTP 请求。

function App() {
  const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
  return <img src={base64Image} alt="Inline Image" />;
}

可通过在线工具或构建插件（如 url-loader）自动转换图片为 base64。

react如何加载本地图片

路径问题：使用 import 或 require 时，路径需相对于当前文件，且构建工具需配置支持图片格式（如 Webpack 的 file-loader）。
文件类型：确保支持的图片格式（如 .jpg, .png, .svg）已在构建配置中声明。
性能优化：大图片建议使用 import 或 require 以利用构建工具的压缩和缓存功能。