javascript - 更改 Prop 时某些图像无法加载

Question

当 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>

  );
}

-----我可以正确访问上述(子)组件内的屏幕截图路径。但数据获取完成后，图像未显示。除屏幕截图外，所有其他数据均正确获取和显示。

Answer 1

您需要在 JSX 中 require 它。

<img src={require(`${screenshot}`)}/>