React中如何正确显示图片？新手遇图片展示难题求助

别担心，这确实是刚上手React时很容易踩的小坑，咱们一步步把它解决掉～

你当前代码里的直接问题 #

你的代码有两个明显的错误，先把它们修正：

1. img的src值写错了：你已经通过import macbookPiso from './images/design/macbookPiso.png'把图片文件导入并赋值给了macbookPiso变量，所以在img的src里直接用这个变量就行，不需要额外加.png后缀，写成{macbookPiso}就对了。
2. React中要使用className代替class：因为class是JavaScript的保留关键字，React元素里定义类名必须用className属性。

修正后的代码示例：

import macbookPiso from './images/design/macbookPiso.png';

function App() {
  return (
    <div className="macbook"> 
      <img src={macbookPiso} alt="Macbook placed on floor" /> 
    </div>
  );
}

export default App;

另外两种常用的本地图片引入方式 #

除了上面的ES模块导入，还有两种场景下常用的方法：

1. 利用public文件夹的绝对路径 #

如果你的图片放在项目根目录的public文件夹内（比如public/images/design/macbookPiso.png），可以直接用绝对路径引用，不需要提前导入：

<div className="macbook">
  <img src="/images/design/macbookPiso.png" alt="Macbook placed on floor" />
</div>

这种方式适合不需要webpack处理的全局静态资源，比如网站图标、固定的背景图等。

2. 使用require动态导入 #

如果需要根据变量动态切换图片，可以用require来加载：

function App() {
  const imageFileName = 'macbookPiso.png';
  return (
    <div className="macbook">
      <img src={require(`./images/design/${imageFileName}`)} alt="Macbook placed on floor" />
    </div>
  );
}

注意这种方式的路径要保证webpack编译时能识别到，路径拼写别出错。

额外检查小提示 #

• 确认图片路径的准确性：检查./images/design/macbookPiso.png相对于App.js的位置是否正确，大小写也要注意（Linux/macOS系统区分文件名大小写，Windows不区分）。
• 脚手架配置确认：如果你用的是create-react-app，它默认已经配置好了图片资源的处理；如果是自己搭建的webpack项目，要确保安装了file-loader或url-loader来处理图片文件。

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