Question

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

2022-12-13

415

javascript reactjs

我试图显示传递给 prop 的图像，但出现错误

找不到模块 '../images/blah-blah.jpg'

尝试在线查找，但无法弄清楚我做错了什么。刚接触 react，如果这真的很简单，请原谅。

<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