Fallback Images crawled by google
Answered
Braque de l'Ariège posted this in #help-forum
Braque de l'AriègeOP
I have a large database which I am showing on my website, and I store images to most of the items on AWS. Not all items have an image, so instead i created a fallback image component that will instead show a different image if there is no image available:
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
/>
);
};
However, I see google trying to index the image paths that error'd out and dont exist, and of course returns 404s. Is there perhaps a better way to do what I'm trying to do?
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
/>
);
};
However, I see google trying to index the image paths that error'd out and dont exist, and of course returns 404s. Is there perhaps a better way to do what I'm trying to do?
Answered by Braque de l'Ariège
yea, issue is that the images come from a completely different source and also get updated, so i'd constantly need to update the DB, too. I just had the idea to create a custom error response for my image bucket to return the fallback image on 404
10 Replies
@Braque de l'Ariège I have a large database which I am showing on my website, and I store images to most of the items on AWS. Not all items have an image, so instead i created a fallback image component that will instead show a different image if there is no image available:
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
/>
);
};
However, I see google trying to index the image paths that error'd out and dont exist, and of course returns 404s. Is there perhaps a better way to do what I'm trying to do?
yea, you can do it like this:
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
// no need for a client component
return (
<Image
{...rest}
src={src ?? fallbackSrc}
/>
// if source is not available the fallbackSrc will be used
);
};Braque de l'AriègeOP
well the issue is that I don't know beforehand which items have images and which dont, so in either case i would pass a URL to the component and src wouldnt be null
to clarify my scenario: i will try to fetch myimageurl.com/<itemId>, not knowing if that item has an image or not. If it doesn't have one (-> the url returns a 404), I want to display a fallback image
@Braque de l'Ariège to clarify my scenario: i will try to fetch myimageurl.com/<itemId>, not knowing if that item has an image or not. If it doesn't have one (-> the url returns a 404), I want to display a fallback image
When you load it like the way you doing now and have your network tab open and click inside the document after reloading the page, do you see now the fallback image or src image?
Braque de l'AriègeOP
with the way ive been doing it, it is correctly showing the fallback image. you can see in the network tab that it attempts to fetch an image first, gets a 404 and then sets the fallback:
i dont like intentionally using errors as part of the solution, but i feel like it would also be too much effort to adjust every item in my database with a "hasImage" column
@Braque de l'Ariège i dont like intentionally using errors as part of the solution, but i feel like it would also be too much effort to adjust every item in my database with a "hasImage" column
yea, normally your database should have some field like
thumbnailStorageKey or similar and this one points to a specific path on your storage server like /media/item-12345/thumbnail.png or similar (without the domain in front). When there is a key, the file exists, if there is no key, the storage key is empty as well. You might need to migrate your database a bit...Braque de l'AriègeOP
yea, issue is that the images come from a completely different source and also get updated, so i'd constantly need to update the DB, too. I just had the idea to create a custom error response for my image bucket to return the fallback image on 404
Answer
Braque de l'AriègeOP
a bit hacky but should be better than my current solution
@Braque de l'Ariège yea, issue is that the images come from a completely different source and also get updated, so i'd constantly need to update the DB, too. I just had the idea to create a custom error response for my image bucket to return the fallback image on 404
yea, like that you may be able to provide google directly the correct image