Как оценить источник изображения по свойствам реагирующего компонента, который я дал ему как опору?

Question

Я не могу использовать реквизит компонента для предоставления src изображения, которое я импортировал по пути в файле JavaScript моего компонента. Я уже сломал реквизит, используя синтаксис.

Я пробовал много форматов:

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"}/>