I am working on a project in which I will be getting HTML file from another source and it can have multiple images, so I cannot modify HTML file. I am planning to write a java script in order to solve below issue.

But that file has some img sources which are not present so image is not getting loaded.

I want to display a particular message like "Please login in order to view this image" instead of unloaded image if it is not loaded while if other images are loaded they should be shown as it is.

It will be helpful if someone can provide any feedback.

CodePudding user response：

Here is how to test after the page has loaded

window.addEventListener("load", event => {
  document.querySelectorAll('img').forEach(img => {
    const isLoaded = img.complete && img.naturalHeight !== 0;
    if (!isLoaded) img.outerHTML = "Please login in order to view this image"
  })
})

<img src="image1.jpg" /><br/>
<img src="image2.jpg" /><br/>
<img src="image3.jpg" /><br/>
<img src="image4.jpg" /><br/>
<img src="image5.jpg" /><br/>
<img src="image6.jpg" /><br/>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If I correctly understand what your're asking, you can do this by using alt within the HTML tag. For example:

<img src="computer.jpg" alt="Computer Image" width="500" height="600">

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you run that snippet, you can see that since the image is not defined, text will appear.