当 Prop 更改时,我遇到问题,但除非手动刷新页面,否则子组件中的图像不会显示。图像没有 404 错误,当我检查图像元素时,令人惊讶的是我看到了正确的图像链接,但图像已损坏。
This is how the image is shown
constructor(props) {
super(props);
this.state = {
screenshot : '',
Mobilescreenshot : '',
}
}
componentDidMount() {
var testId = this.props.location.query.id;
this.setState({ url: '', isLoading: true, loadingModal: true, submitBTN: false });
this.props.getOldReport(testId);
}
componentWillReceiveProps(newProps) {
if (newProps.oldReport && this.state.isLoading) {
this.setState({ isLoading: false,report_id :
newProps.oldReport.report_id,
screenshot : newProps.oldReport.screenshot
})
}
}
<小时/>
componentDidMount 中的 getOldReport(testId) 方法返回屏幕截图
新的屏幕截图图像路径通过 componentWillReceiveProps 存储在状态中
此图像路径被传递到子组件中:
<ReportTable
first_paint_time={first_paint_time}
overall_score={overall_score}
page_speed_warning={page_speed_warning}
yslow_warning={yslow_warning}
page_load_time={page_load_time}
page_bytes={page_bytes}
screenshot = {"/images/screenshots/" + this.state.screenshot}
report_id = { this.state.report_id}
/>
------------这是我用于渲染屏幕截图图像的子组件
const REPORT_SCREENSHOT = ({
Mobilescreenshot,screenshot,first_paint_time,report_id }) => {
console.log('SCREENSHOT FROM INNER',screenshot);
return (
<div>
<div style={{ marginBottom: '1.2rem' }} className='screenshot-macbook'>
<img src={screenshot}/>
<strong>
<p style={{ marginTop: '1.2rem' }} className="center">First render at :
{(first_paint_time / 1000).toFixed(2)}s</p>
</strong>
</div>
</div>
);
}
-----我可以正确访问上述(子)组件内的屏幕截图路径。但数据获取完成后,图像未显示。除屏幕截图外,所有其他数据均正确获取和显示。
最佳答案
您需要在 JSX 中 require 它。
<img src={require(`${screenshot}`)}/>
关于javascript - 更改 Prop 时某些图像无法加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47915297/