Does this support a fallback image if the img is not loaded?

[bnbon]

I think it should roll back to placeholderSrc if src is not found...

I can check at my end if there is no property, but if its set to black; the library before would just try to load a broken image; instead it should return something that makes the placeholderSrc render.

I used this

src={img_url ? img_url : placeholderImg}

[ayxos]

@bonbonio Have you found a solution to implement this?

I think it should roll back to placeholderSrc if src is not found...

I can check at my end if there is no property, but if its set to black; the library before would just try to load a broken image; instead it should return something that makes the placeholderSrc render.

I used this

src={img_url ? img_url : placeholderImg}

[Aljullu]

If src is defined but loading the image fails for some reason, the onload event is not fired so the placeholder image would still be visible.

In the case src is not defined at all, your solution (src={img_url ? img_url : placeholderImg}) sounds good enough to me, is there anything you would change in how the library works?

[mydearxym]

i think a fallback props or onError callback is needed，take the README examle:

const Article = ({ articleId }) => (
  <div>
    <ArticleContent id={articleId} />
    <LazyLoadComponent placeholder={LoadingComp} fallback={ErrorHint}>
      <ArticleComments id={articleId} />
    </LazyLoadComponent>
  </div>
);

if the Comments Comp is load failed for some reason, i can show the ErrorHint Comp

another realworld example is the net::ERR_CONNECTION_REFUSED error when load image fails can not fallback to placeholder， and i have to do very ugly staff to do that

[raine]

If src is defined but loading the image fails for some reason, the onload event is not fired so the placeholder image would still be visible.

This is not what I'm seeing. <img> element is there even if loading the image fails.

[patrikw1]

+1

This is actually very decent future to have, for example if i have placeholderSrc as minified version of src that is original, and both are at same storage server and there is failure for some reason, i can still show something else. Rollbacking to the placeholderSrc if main src is not loaded is not a good option imo.

[ivdznk]

onError={() =>{}} should work.