在 React 中使用图像时“找不到模块”

Question

我正在使用 React，但在组件中导入图像时遇到了问题。现在我知道如何使用 import 方法，这对于某些事情来说很好，但在这种情况下，图像 src 是我需要映射的对象数组的一部分。

如果我直接这样做，让我开始吧：<img src={require('../../images/leadinvestigator.jpg')} /> 它工作得很好。

但是，如果我这样做：<img src={require(member.image)} /> 或 <img src={require(${member.image})} /> 我会得到：

react-dom.development.js:11340 Uncaught Error: Cannot find module '../../images/leadinvestigator.jpg'

如果我这样做：<img src={require({member.image})} /> 我得到一个无效令牌错误

这是我的组件代码：

import React from "react"
import "react-responsive-carousel/lib/styles/carousel.min.css"
import { Carousel } from 'react-responsive-carousel'
import './styles.css'

const Crew = () => {
  const crewMembers = [
    {
      image: '../../images/leadinvestigator.jpg',
      name: 'Bryant Richards',
      title: 'Lead Investigator',
      quote: 'In the end, it only matters what you believe'
    }
  ]
  return (
    <Carousel
      showArrows={true}
      infiniteLoop={true}
      showThumbs={false}
      showStatus={false}
      autoPlay={true}
      interval={6100}
    >

      {
        crewMembers ? crewMembers.map(member => (
          <div>
            <img src={require('../../images/leadinvestigator.jpg')} />
            <div className="myCarousel">
              <h3>{member.name}</h3>
              <h4>Designer</h4>
              <p>
                It's freeing to be able to catch up on customized news and not be
                distracted by a social media element on the same site
              </p>
            </div>
          </div>
        )) : null
      }
    </Carousel>
  )
}

export default Crew

Answer 1

在放入对象之前尝试导入您的图像。

添加到你的组件之上：

import bryantImage from '../../images/leadinvestigator.jpg'

然后像这样将此图像添加到您的对象中：

const crewMembers = [
    {
      image: bryantImage,
      name: 'Bryant Richards',
      title: 'Lead Investigator',
      quote: 'In the end, it only matters what you believe'
    }
  ]