Question

当道具更改时我遇到问题，但子组件中的图像不会显示，除非手动刷新页面。图像没有404错误，当我检查图像元素时，令人惊讶的是我看到正确的图像链接但图像被破坏了。

      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
           })
        }
      }

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中使用它。

更换道具时，某些图像无法加载

1 个答案: