render() {
const file1 = {
"name": "xxxxx",
"img" : "https://drive.google.com/thumbnail?id=1zeBeWS26cF"
//**"previously I calling the image from google drive now I need to
render it from local path. how can I do that?"**,
"details" : "blah blah"
};
const file2 = {
"name": "xxxxx",
"img" : "https://drive.google.com/thumbnail?id=1zeBeWS26cFxxxxxx"
//**"previously I calling the image from google drive now I need to
render it from local path. how can I do that?"**,
"details" : "blah blah"
};
return (
<div className="bio_mainDiv">
<div className="cards"><BioCard card={file1}/></div> **//So I am not able use <img src="" /> here..**
<div className="cards"><BioCard card={file2}/></div>
</div>
);
}
BioCard 组件
class BioCard extends Component {
handleDetailClick = () => {
this.props.showDetails(this.props.card);
};
render() {
const currcard = this.props.card;
const name = currcard.name;
const details = currcard.desc;
const img = currcard.img;
return (
<div onClick={this.handleDetailClick}>
<div className="biocard_main">
<img className="biocard_img" src={img} alt=""/>
<div className="biocard_name">{name}</div>
<div className="biocard_details">{details}</div>
</div>
</div>
);
}
}
BioCard.propTypes = {
card: PropTypes.object.isRequired
};
export default connect(
null,
mapDispatchToProps
)(BioCard);
之前我渲染了来自谷歌驱动器的图像,效果很好。现在我需要从本地路径渲染它。如何在 Reactjs 中渲染 const 变量中的图像?我不能在这里使用 img 标签,我在这里有什么选择。
最佳答案
使用 require 导入模块或使用 es6 导入模块
import 语句用于导入由另一个模块导出的绑定(bind)。无论您是否这样声明,导入的模块都处于严格模式。 import 语句不能用于嵌入式脚本。
1. Using Import
import imgPath from '../img' //local path of image in application
render() {
const file1 = {
"name": "xxxxx",
"img": "https://drive.google.com/thumbnail?id=1zeBeWS26cF",
//**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
"details": "blah blah"
};
const file2 = {
"name": "xxxxx",
"img": imgPath,
//**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
"details": "blah blah"
};
return (
<div className="bio_mainDiv">
<div className="cards"><BioCard card={file1} /></div> **//So I am not able use <img src="" /> here..**
<div className="cards"><BioCard card={file2} /></div>
</div>
);
}
2. Using require
render() {
const file1 = {
"name": "xxxxx",
"img": "https://drive.google.com/thumbnail?id=1zeBeWS26cF",
//**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
"details": "blah blah"
};
const file2 = {
"name": "xxxxx",
"img": require('.../img'),
//**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
"details": "blah blah"
};
return (
<div className="bio_mainDiv">
<div className="cards"><BioCard card={file1} /></div> **//So I am not able use <img src="" /> here..**
<div className="cards"><BioCard card={file2} /></div>
</div>
);
}
关于javascript - 以前我从谷歌驱动器渲染图像,现在我需要从本地路径渲染它。如何在 Reactjs 中渲染 const 变量中的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50344946/