React中可点击图片迁移后无法加载的问题求助

你遇到的问题是因为React的资源引用规则和原生HTML不同，加上路径符号使用错误导致的，以下是具体修复方案：

方案一：通过import引入图片（推荐） #

在React中，src目录下的资源需要通过模块导入的方式引用，步骤如下：

1. 在App.js顶部导入图片文件：

import githubImg from './images/github.png';
import linkedinImg from './images/linkedin.png';

2. 修改JSX中的img标签，将src替换为导入的变量：

<a href="https://github.com/tylerking841" target="_blank" rel="noreferrer">
  <img id="github" alt="github" src={githubImg} />
</a>
<a href="https://www.linkedin.com/in/tylerkiingg" target="_blank" rel="noreferrer">
  <img id="linkedin" alt="linkedin" src={linkedinImg} />
</a>

方案二：使用require动态引入 #

如果不想逐个导入，也可以用require直接在src中引用：

<a href="https://github.com/tylerking841" target="_blank" rel="noreferrer">
  <img id="github" alt="github" src={require('./images/github.png').default} />
</a>
<a href="https://www.linkedin.com/in/tylerkiingg" target="_blank" rel="noreferrer">
  <img id="linkedin" alt="linkedin" src={require('./images/linkedin.png').default} />
</a>

注：部分React版本中，require返回的模块需要取.default才能拿到图片路径，若直接使用require('./images/github.png')生效则可省略。

关键注意点 #

• 路径符号必须用正斜杠/，你原来代码中的反斜杠\会被JSX解析为转义字符，导致路径错误，这是图片加载失败的直接原因之一。
• 确保图片文件确实存在于src/images/目录下，文件名（包括大小写）完全匹配，React对文件名大小写敏感。

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