0
The logic below is: React/Nextjs with Styled-Components.
Hello, I have a component that "renders" the banner of a blog (background-image), the url comes from a state that already has a standard image.
const [blogBanner, setBlogBanner] = useState('/images/imageBlogDefault.png')
But before the component receives that state, the code checks whether that blog already has a banner defined by the user. If yes, then take the url and update the state.
if (props.blog.image) {
setBlogBanner(`${hlp.BACKEND_HOST}/images/blogBanners/${props.blog.image}`)
}
And in Styled-Components I use the background-image: url(blogBanner).
The problem is that the request that picks up the blogs returns only the url of the banner and not the image itself, so if for some reason the image is deleted from the database without removing its url on the blog... when loading this blog my code will "understand" that that blog "has image" and will update the state with the new url.
So what I need to do is not only check if it has a url (as I already do), I need to check if that url returns an image before updating the state, but I don’t know how to do that. It could even be with css (Styled-Component) if it were possible.
I tried to do a function that makes a request get with the image url and if the returned status is 404 then it doesn’t update the state, but it didn’t work. --> async Function test(url) { const Response = await fetch(url) console.log(Response) if (Response.status == 200) { setBlogBanner(/** Updates banner*/) } } if (props.portfolios.images[0]) { test(bannerURL) }
– Dhenyson Jhean