图像作为道具传递给子组件后不显示

Question

我正在尝试显示我传递给道具的图像但出现错误

找不到模块“../images/blah-blah.jpg”

尝试在线查看但无法弄清楚我做错了什么。 新反应，很抱歉，如果这真的很简单。

<ProfileCard 
   image='../images/blah-blah.jpg' 
   name='Name' 
   title='(CEO)'/>

import React from "react"
import Card from 'react-bootstrap/Card';

function ProfileCard({image, name, title}) {
  return (
    <Card style={{ width: '22rem' }}>
    <Card.Img variant="top" src={require(image)} /> 
    <Card.Body>
      <Card.Title>{name}</Card.Title>
      <Card.Text>
        {title}
      </Card.Text>
    </Card.Body>
  </Card>
  )
};

export default ProfileCard;

文件夹结构

Answer 1

您需要像这样在父组件中导入这样的图像

import ImageFile from '../images/blah-blah.jpg' 

<ProfileCard 
   image={ImageFile}
   name='Name' 
   title='(CEO)'
/>

然后您可以在 ProfileCard 组件中以这种方式使用它

import React from "react"
import Card from 'react-bootstrap/Card';

function ProfileCard({image, name, title}) {
  return (
    <Card style={{ width: '22rem' }}>
    <Card.Img variant="top" src={image} /> 
    <Card.Body>
      <Card.Title>{name}</Card.Title>
      <Card.Text>
        {title}
      </Card.Text>
    </Card.Body>
  </Card>
  )
};

export default ProfileCard;

require 不是必需的，您可以将ImageFile重命名为您想要的任何名称。

另外，确保路径正确。 您可以查看此 codesandbox 上的工作示例https://codesandbox.io/s/kind-shtern-qx23ev?file=/src/index.js