在React/Next中更新State之前，请检查图像URL

Question

下面的逻辑位于：React/Nextjs和样式化组件

你好，我有一个组件；呈现"；博客横幅(背景图像(，url来自已经有标准图像的状态。

const [blogBanner, setBlogBanner] = useState ('/ images / imageBlogDefault.png')

但在组件接收到这种状态之前，代码会检查该博客是否已经有用户定义的横幅。如果是，则获取url并更新状态。

if (props.blog.image) {
setBlogBanner (`$ {hlp.BACKEND_HOST} / images / blogBanners / $ {props.blog.image}`)
}

在样式组件中，我使用背景图像：url(blogBanner(。

问题是，获取博客的请求只返回横幅url，而不是图像本身，因此，如果出于某种原因从数据库中删除图像，而没有从博客上删除url。。。当加载这个博客时，我的代码将"；理解"；那个博客；具有图像"；并将使用新的url更新状态。

所以我需要的是，除了检查它是否有url(我已经做了(，我还需要在更新状态之前检查该url是否返回图像，但我不知道如何做到这一点。如果可能的话，它甚至可以使用css(样式组件(。

我试图创建一个函数，该函数获取图像url并生成HTTP请求，如果它返回状态404，则我没有更新状态url的。但这并没有奏效。在反应组件？

Answer 1

你可以做：

var image = new Image();
image.onload = () => setBlogBanner(image.src)
image.src = `$ {hlp.BACKEND_HOST} / images / blogBanners / $ {props.blog.image}`

这将预加载图像，如果加载成功，则将博客横幅值设置为该src。