How to display broken image icon in image-sized box?

Wayne Campbell 21

I am trying to display broken image icons inside a box the size of the target image. Mozilla has the -moz-force-broken-image-icon: 1; property for doing this. Is there an equivalent property for this in Edge? Also, Firefox displays the alt text aligned with the top of the rectangle and wraps at the width of the rectangle instead of being at the bottom of the page and going offscreen (which is what Edge does). Is there a way to do this with Edge?

Edit: I noticed that on 2 pages that are virtually identical the alt text displays at the top on one and on the bottom of the other. The differences in the two pages are minimal and shouldn't have an effect on the position of the alt text. Why are they different?

Here are the two pages in question so you can see them side-by-side if you open them in different tabs.

3DModels.html
myModels.html

Wayne Campbell 21

This seems abit complex, and maybe you're not getting what I want. Here is an image of what the page looks like in Firefox. The alt text is displayed within the rectangle that shows the size of the missing image. I'm not sure that your method will accomplish this. And the entire thing is done with this CSS:

      .img {
        -moz-force-broken-image-icon: 1;
        width:1060px;
        height:658px;
      }

          <IMG class='img' src='greatCrystal/greatCrystal.msz' alt="This is the way I originally intended the model viewer page to look. Until I can find a way to convert .msz files to glTF or GLB formats they remain unviewable. If you are using any browser other than FireFox you may not see the border of the display area of the viewer. This is because FireFox has the -moz-force-broken-image-icon: 1; property that allows me to show the frame of a broken image. Other browsers (like Edge) won't show it. Also, other browsers (like Edge) won't center the content properly in the viewport.">

Lan Huang-MSFT 29,746 Reputation points Microsoft Vendor

2022-01-28T08:06:51.96+00:00

Hi @Wayne Campbell ,
I think you can specify the length and width of <td 4>. The size of the missing image cannot be determined.
If you can confirm it, you can directly set the size of <td 4> to the size of the image.
Best regards,
Lan Huang
Wayne Campbell 21 Reputation points

2022-01-28T13:44:06.173+00:00

This suggestion was partially the fix. I had to make a few other changes to other classes in the CSS but it worked out. There is another issue not directly related to this question, but pertaining to the rendering of the page in the viewport. In Firefox there is now a double-border at the bottom of the TD. The height of the TD and the height of the image are the same, but there is a ~4-pixel difference at the bottom of the TD. This is not an Edge issue since Edge does not render the outline of the image rectangle. The only other issue left is pertaining to the overall size of the page render and the centering of the content in the viewport in Edge. Looking at the code in Edge, it seems Edge does not recognize the translate property. But due to the overall size of the content being rendered larger than in Firefox the bottom of the content goes all the way to the bottom of the viewport, and more to the right than centered horizontally. I can live with this, but Edge users will have to live with it not looking the way I intended.

Thanks for your help, and I consider this question answered. If you edit your answer to include your suggestion above, I can then accept the answer so this question can be closed. For anyone wanting to see everything, click the links in the question. I will be uploading the changes to my website after I finish this comment. You can look at the source to the page to see what the CSS looks like.
Lan Huang-MSFT 29,746 Reputation points Microsoft Vendor

2022-02-03T01:25:13.937+00:00

Hi @Wayne Campbell ,
I've edited the suggestion to the second point in the answer.
Best regards,
Lan Huang

Accepted answer

Lan Huang-MSFT 29,746 Reputation points Microsoft Vendor

2022-01-28T03:45:23.483+00:00
Hi @Wayne Campbell ,
1.You can try using JavaScript to manipulate the element's src attribute with the help of the onerror attribute of the img element. Whenever an image fails to load due to wrong src attribute URL, use JavaScript to replace the attribute with the desired URL.

<div id="container"><img src="https://awik.io/my-image-disapp eared.jpg" one rror="handleBrokenImg(this);"/></div> <script> fun ction handleBrokenImg(el) { el.src = 'https://awik.io/wp-content/uploads/2018/12/broken-img.png'; } </script>

2.For text overflow problems, I think you can specify the length and width of <td 4>. The size of the missing image cannot be determined.
If you can confirm it, you can directly set the size of <td 4> to the size of the image.
3.You can press f12 and then click the screenshot location to view it yourself, or provide the source code.

Below is the demo and code:169180-text.txt

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

1 person found this answer helpful.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to display broken image icon in image-sized box?

0 additional answers

Your answer