为何在React中直接使用src属性无法渲染图片？

核心原因：打包工具的资源处理逻辑差异 #

• import引入的资源会被webpack正确处理
  当你用import引入图片时，webpack（React脚手架默认打包工具）会把图片当作项目模块处理：

  • 自动将图片复制到打包后的输出目录（比如build/static/media）
  • 给图片生成带哈希的唯一文件名（避免缓存问题）
  • 最终import返回的是打包后图片的完整访问路径，所以能正常渲染

• 直接写src属性时路径指向错误
  如果你在Contact.js里直接写src="./images/felix.png"，浏览器会从当前组件的访问路径（比如http://localhost:3000/components）去请求这个相对路径，但打包后图片根本不在这个位置，自然找不到资源，导致图片无法显示。

额外说明：资源目录的使用规则 #

你的图片放在src/images下，属于源码内的资源，React脚手架要求这类资源必须通过import/require引入，才能被打包工具识别处理。

如果想直接用src属性写路径，需要把图片移到public目录下，然后用根路径访问，比如：

<img src="/felix.png" alt="felix" />

因为public目录下的资源会被原封不动复制到打包后的根目录，浏览器可以通过根路径直接访问到。

示例代码对比 #

• import引入（当前目录结构可用）：

import felix from '../images/felix.png';

function Contact() {
  return <img src={felix} alt="felix" />;
}

• 直接用src属性（需将图片移到public目录）：

function Contact() {
  return <img src="/felix.png" alt="felix" />;
}

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