onError img 函数在 React 组件中不起作用/触发

Question

我已经编写了React组件来替换我正在处理的Symfony项目中当前使用的html twig组件。但是，并非文章的每个实例都会返回图像 URL，这会阻止页面加载这些特定文章。

以下是我对文章组件的内容：

function ArticleImage({ articleImageUrl, articleImageAlt, articleImageCaption }) {
const addDefaultSrc = (e) => {
e.target.src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Flag_of_.svg";
e.target.onerror = null;
};
return (
<div className={styles.articleImage}>
<img
onError={addDefaultSrc}
src={articleImageUrl}
alt={articleImageAlt}
/>
{articleImageCaption}
</div>
);
}
export default ArticleImage;

Answer 1

不要直接更新 DOM。只需更改状态。

例

const { useState, useEffect } = React;
const App = () => {
const [{url, alt}, setImage] = useState({
url: 'https://i.picsum.photos/id/-1/100/100.jpg',
alt: 'test'
})

const onError = () => {
setImage(image => ({
...image,
url: 'https://i.picsum.photos/id/194/100/100.jpg'
}))
}
return <div>
<img src={url} onError={onError} alt={alt}/>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>