javascript - 如何从我作为道具提供的反应组件的属性中评估图像的来源?
问题描述
我无法使用组件的 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;
解决方案
供你参考:
<img src="/assets/img/background.png"/>
<img src={"/assets/img/background.png"}/>
推荐阅读
- android - 如何以 dp 为最大宽度设置百分比宽度?
- r - 如何通过列之间的平均来减少我的数据框的列维度?
- html - 在小计中格式化淘汰数
- mongodb - 为什么按项目数量对总和数量进行分组不为零,但它显示了许多带有字母 e“1.1102230246251565e-16”的数字与聚合 mongodb?
- angular - Angular 7嵌套延迟加载问题
- powerbi - Dax 查询 - 运行总计%
- python - 字典:对象作为值不起作用
- android - 将导航组件与多个活动一起使用
- php - 上传图像时出错 PHP Fileinfo 扩展必须安装/启用才能使用干预图像
- java - 请求被拒绝,因为没有找到多部分边界 angular+spring