React添加图片报错Cannot find module './undefined' 求解决方案

Hey there, let's break down what's going on with your image loading problem and fix it step by step!

Why You're Seeing These Problems #

• Error: Cannot find module './undefined': This happens because when your component first renders, book.cover is likely undefined (maybe your book state hasn't finished loading yet). When you pass ../images/${book.cover} to require(), it becomes ../images/undefined, which webpack can't resolve as a valid module.
• Image placeholder with no error: When you skip require(), webpack can't statically analyze the dynamic path ../images/${book.cover} during bundling. That means it doesn't include the image in your build output, so the browser can't find it when trying to load the URL.

Solutions to Fix This #

1. Guard Against Undefined Values First #

Add a condition to only render the image once book.cover has a valid value. This prevents the undefined path error:

const { book, quantity } = this.state;

return (
  <div className="container">
    <div className="row">
      <div className="col-sm-6">
        {/* Only render image if book and book.cover exist */}
        {book?.cover ? (
          <img src={require(`../images/${book.cover}`)} alt={book.title} />
        ) : (
          <div>Loading cover image...</div> {/* Fallback while loading */}
        )}
      </div>
      {/* Rest of your code */}
    </div>
  </div>
)

2. Use require.context for Batch Image Import (Better for Dynamic Cases) #

Webpack's require.context lets you import all images in a directory at once, which is perfect for dynamic loading. Here's how to use it:

First, add this at the top of your component file:

// Import all images from the ../images directory
const imageContext = require.context('../images', false, /\.(png|jpe?g|svg|gif)$/);
// Function to get the image URL by filename
const getBookCover = (coverFilename) => imageContext(`./${coverFilename}`);

Then update your image tag:

<div className="col-sm-6">
  {book?.cover ? (
    <img src={getBookCover(book.cover)} alt={book.title} />
  ) : (
    <div>No cover available</div>
  )}
</div>

3. Manual Import & Mapping (For Small Number of Images) #

If you only have a few book covers, you can manually import each one and map them to filenames:

// At the top of your component
import cover1 from '../images/book-cover-1.jpg';
import cover2 from '../images/book-cover-2.png';

// Create a map of filename to imported image
const coverImageMap = {
  'book-cover-1.jpg': cover1,
  'book-cover-2.png': cover2
};

Then use it in your JSX:

<div className="col-sm-6">
  <img 
    src={coverImageMap[book.cover] || '../images/default-cover.jpg'} 
    alt={book.title} 
  />
</div>

Quick Checks to Verify #

• Double-check that book.cover exactly matches the image filename (including case sensitivity and file extension like .jpg or .png).
• Confirm the ../images/ path is correct relative to your component file (e.g., if your component is in src/components/BookDetail.js, ../images/ would point to src/images/).
• Make sure your book state is properly initialized or fetched before the component renders (e.g., if loading from an API, add a loading state until data is ready).

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