如何在React组件中添加图片？public目录图片加载失败求助

问题原因 #

你当前的图片路径写法错误，React打包后public文件夹会作为网站的根目录，无需在路径中包含./public；同时你尝试的import语句存在语法错误。

解决方案一：直接使用根路径（推荐） #

修改img的src属性，直接从根目录指向图片：

import { Component } from 'react';
import './App.css';

class BasicFigure extends Component {
  render() {
    return (
      <figure>
        <img src="/Image/cats.jpg" alt="a cat" />
        <figcaption>This is a picture of a cat</figcaption>
      </figure>
    );
  }
}

export default BasicFigure;

解决方案二：使用import导入 #

先修正import语法，再将导入的变量作为src值：

import { Component } from 'react';
import './App.css';
// 注意：路径需根据当前组件文件位置调整，确保正确指向public下的图片
import catImage from '../public/Image/cats.jpg';

class BasicFigure extends Component {
  render() {
    return (
      <figure>
        <img src={catImage} alt="a cat" />
        <figcaption>This is a picture of a cat</figcaption>
      </figure>
    );
  }
}

export default BasicFigure;

额外检查项 #

• 确认图片文件名和路径的大小写一致，比如Image和image在Linux环境下会被视为不同路径
• 检查图片文件是否确实存在于public/Image/cats.jpg，扩展名是否为.jpg（注意区分.jpeg或大写.JPG）

内容的提问来源于stack exchange，提问作者Yannick