如何从我作为道具提供的反应组件的属性中评估图像的来源？

Question

我无法使用组件的 prop 来提供从组件的 JavaScript 文件中的路径导入的图像的 src。我已经使用语法破坏了道具。

我尝试了很多格式：

src={`${src}`}
src =src
src={src}
src={{src}}
src={`${src}`}

没有编译错误 这是我的代码>

import React from 'react';
import './Card.css';
import 'tachyons';
import aryan from "./images/aryan.jpg";
import azeem from "./images/azeem.jpg";
import simran from "./images/simran.jpg";
import vidushi from "./images/vidushi.jpg";
import shubham from "./images/shubham.jpg";
import bobby from "./images/bobby.jpg";

const Card=({id,name,source,username,email}) =>{

    return (
    <div className='pa3 br3 dib bg-light-green ma2 grow bw2 shadow-5'>
      <img src= {source}
       alt="Test"/>
      <div className='tc f3'> 
      <h4>{`${name}`}</h4>
      <h5>{`${username}`}</h5>
      <p className='f5'>{`${email}`}</p>
      </div>
    </div>
    )

}
export default Card;

Answer 1

供您参考：

<img src="/assets/img/background.png"/>
<img src={"/assets/img/background.png"}/>