Error 404 on img src can't replace image

Since few days i am stuggling with some problem on img replace in javascript. I am coding this application with course, but in this course video img replacing work well. probably main cause is that I fetch other API. Its opportunity for me to learn how to solve this kind of problems but i can't find answer since few days.

Here is my code: https://codepen.io/sowicz/pen/xxjyXVO

And problem is in this lines below. Because of some serials data from json can't be load (GET 404 error) I want to replace img for some img from pixabay. Unfortunately it doesn't work. I can't solve this issue.

if(serials.Poster) {
                imgSrc = serials.Poster;
            } else {
                this.imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"
            }

I am very sorry if something is missing, I am new in coding. Thanks a lot in advance, and wish you good day!

CodePudding user response：

this.imgSrc = is same as showsApp.imgSrc. the problem is you use imgSrc as local var to call method getShowBoxByTemplate.

I think we should change it into

let imgSrc = null;

if (serials.Poster) {
    imgSrc = serials.Poster;
} else {
    imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"
}

const imgSrc = !!serials.Poster ? serials.Poster : "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"

const imgSrc = serials.Poster || "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg"

if your image responds with 404 code you can use onerror event like the example here

<img src="${imgSrc}" one rror="this.src='https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg'" alt="">

CodePudding user response：

You attempt to use the fallback image, if your API's data does not provide an image URL. Please note that as an image URL is provided (albeit it points to a location that does not exists) your else-Block ist not executed in this case. This is because

if ( serials.Poster )

just checks, that the attribute Poster is present in the object "serials". It completely ignores whether this contains a valid URL or even points to an existing location.

If you want to check in vanilla JS whether that image can be loaded from it's URL, I suggest you do an XHR and check the status for the 20X-range. See HTTP Status Code from URL in Javascript for more detail.

I suggest you try that in isolation, so you can better narrow the issue down. You can use

let serials = {
    "Poster": "https://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
}

if ( serials.Poster ) { // TODO: improve this
    imgSrc = serials.Poster;
} else {
    imgSrc = "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810__340.jpg";
}  

console.log("imgSrc:", imgSrc);

and try out what happens if you misspelled Poster to understand what I mean.

As you intend to practice and learn, I will not include a possible solution as to not withhold this learning opportunity for you.

CodePudding user response：

you want to replace all the images or you just want it to be replaced whenever you get 404 response?