Question

考虑以下组件

import React from 'react';

function Image() {
  function onLoad() {
    console.log("Loaded...")
  }

  return (
      <img
        src="http://..."
        onLoad={onLoad}
        decoding="async"
      />
  );
}

export default Image;

由于某些原因，onLoad事件无法持续触发，即，当我最初加载页面并刷新它时，它不会被触发，但是当我以交互方式装入组件时，即没有页面加载时，它就会被触发。

我试着删除decoding="async"并添加onError处理程序，以查看它们是否提供了更多信息，但是行为没有改变。

我在macOS Safari和chrome浏览器中看到了相同的行为。

编辑：在无法正常工作的情况下，根本不会加载图片

Answer 1

我想出了如何使其适用于我的情况。我猜onLoad事件没有执行，因为图像已经加载，所以我将代码更改为以下代码，现在它可以按预期运行

import React, { useRef, useEffect } from 'react';

function Image() {
  const imgRef = useRef<HTMLImageElement>(null);

  function onLoad() {
    console.log("Loaded...")
  }

  useEffect(() => {
   if (imgRef.current?.complete) {
    onLoad();
   }
  }, []);

  return (
      <img
        ref={imgRef}
        src="http://..."
        onLoad={onLoad}
        decoding="async"
      />
  );
}

export default Image;

Answer 2

您可以提供有关该错误的更多信息吗？它应该可以工作，使用箭头函数并在img的onLoad事件上调用它

import React from 'react';


  onLoadFunction=()=>{
    console.log('just loaded');
  }
  return (
      <img
        src="http://..."
        onLoad={this.onLoadFunction}

      />
  );
}

export default Image;

Answer 3

问题可能是Image是DOM中的保留键盘，请考虑更改函数名称。否则，它可能会更改图像类。

// Image Size is >3MB
const App = () => {
  
  const onImageLoad = () => {
    console.log("Working...")
  }

  return (
    <div>
      <img src="https://unplash-api.herokuapp.com/api/Ri8c2qFg32A/full" onLoad={onImageLoad}/>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<img />标记的onLoad事件不会在初始页面访问时触发

3 个答案: