使用React.lazy加载图片出现src="[object Object]"且图片无法加载

核心错误 #

React.lazy 是用来懒加载React组件的，不是用来导入图片这类静态资源的。你用它导入图片时，得到的是一个模块对象，直接把这个对象赋值给<img>的src属性，就会显示[object Object]——因为src需要的是字符串格式的图片路径，而不是对象。

解决方案 #

方案1：常规导入图片（不需要懒加载）

直接导入图片文件，webpack会自动处理成路径字符串，直接赋值给src即可：

import React from 'react';
import '../style/App.css';
// 直接导入图片，得到路径字符串
import macbookImage from '../img/macbook.png';

function App() {
  return (
    <>
      <header>
        <div className="container">
          <div className="items-left">
            <h1>Lorem ipsum</h1>
            <div>Lorem ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum </div>
            <button>Se connecter</button>
            <button>En savoir plus</button>
          </div>
          <div className="items-right">
            <img src={macbookImage} height="10px" width="10" alt="Macbook"/>
          </div>
        </div>
      </header>
      <footer></footer>
    </>
  );
}

export default App;

方案2：动态懒加载图片（适合大图片按需加载）

如果需要懒加载图片，可以用动态import获取图片路径，结合状态管理实现加载状态：

import React, { useState, useEffect } from 'react';
import '../style/App.css';

function App() {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    // 动态导入图片模块，取default属性拿到路径字符串
    import('../img/macbook.png').then(module => {
      setImageSrc(module.default);
    });
  }, []);

  return (
    <>
      <header>
        <div className="container">
          <div className="items-left">
            <h1>Lorem ipsum</h1>
            <div>Lorem ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum </div>
            <button>Se connecter</button>
            <button>En savoir plus</button>
          </div>
          <div className="items-right">
            {/* 加载完成前显示占位内容 */}
            {imageSrc ? (
              <img src={imageSrc} height="10px" width="10" alt="Macbook"/>
            ) : (
              <div>Chargement...</div>
            )}
          </div>
        </div>
      </header>
      <footer></footer>
    </>
  );
}

export default App;

方案3：用React.lazy封装图片组件（结合Suspense）

如果想继续用Suspense做加载占位，可以把图片封装成独立组件，再用React.lazy懒加载这个组件：

1. 新建LazyImage.js文件：

import React from 'react';
import macbookImage from '../img/macbook.png';

export default function LazyImage() {
  return <img src={macbookImage} height="10px" width="10" alt="Macbook"/>;
}

2. 在App组件中使用：

import React, { Suspense } from 'react';
import '../style/App.css';

// 懒加载图片组件
const LazyImage = React.lazy(() => import('./LazyImage'));

function App() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <header>
        <div className="container">
          <div className="items-left">
            <h1>Lorem ipsum</h1>
            <div>Lorem ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum </div>
            <button>Se connecter</button>
            <button>En savoir plus</button>
          </div>
          <div className="items-right">
            <LazyImage />
          </div>
        </div>
      </header>
      <footer></footer>
    </Suspense>
  );
}

export default App;

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