在 React / Next 中更新状态之前检查图像 URL

Question

下面的逻辑在：React / Nextjs with styled-components。

您好，我有一个“呈现”博客横幅（background-image）的组件，该网址来自一个已具有标准图像的状态。

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

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

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

在 styled-components 我使用 background-image: url (blogBanner)。

问题是获取博客的请求仅返回横幅 url 而不是图像本身，因此如果由于某种原因从数据库中删除了图像而没有从中删除 url博客...加载此博客时，我的代码将“理解”该博客“有图像”，并将使用新 url 更新状态。

所以我需要的是，除了检查它是否有一个 url（就像我已经做的那样），我需要在更新状态之前检查那个 url 是否返回一个图像，但我不知道该怎么做.如果可能的话，它甚至可以使用 css（样式化组件）。

我试图创建一个函数来获取图像 url 并生成 HTTP 请求，如果它返回状态 404 那么我没有更新状态 的网址。但它没有用。有没有直接的治疗方法 反应组件？

Answer 1

你可以这样做：

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

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