How can we set alternative fallback image instead of alternative text in email? - Stack Overflow

admin管理员组

文章数量:1297024

I have to show an alternative image. If first image is not accessible then second image can be displayed in its place. Since it is email environment I cannot apply onerror property since it won't work in some email clients.

I have tried this way. With this way if first image is broken then second image is displayed which is just beneath the first one. However in this case the broken image icon will be visible with does not look good.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" height="100" style="
      background: url('.jpeg') no-repeat center;
      background-size: cover;
      text-align: center;">
      <img src=".jpeg" 
           width="200" 
           height="100" 
           alt="Your Image" 
           style="display: block;">
    </td>
  </tr>
</table>

I have to show an alternative image. If first image is not accessible then second image can be displayed in its place. Since it is email environment I cannot apply onerror property since it won't work in some email clients.

I have tried this way. With this way if first image is broken then second image is displayed which is just beneath the first one. However in this case the broken image icon will be visible with does not look good.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" height="100" style="
      background: url('https://wil-blast-cms-develop.s3.us-west-2.amazonaws/images_3_dfd58f2b7e.jpeg') no-repeat center;
      background-size: cover;
      text-align: center;">
      <img src="https://wil-blast-cms-develop.s3.us-west-2.amazonaws/images_3_dfd58f2b7e.jpeg" 
           width="200" 
           height="100" 
           alt="Your Image" 
           style="display: block;">
    </td>
  </tr>
</table>

• email
• html-email
• email-client

Share Improve this question Follow edited Feb 12 at 8:23 Ashish Aswal asked Feb 11 at 16:18 Ashish AswalAshish Aswal 111 bronze badge 4

• This seems like a case of the XY problem. Why exactly do you need to do this? Why are you sending an email with links that might not work? – asportnoy Commented Feb 11 at 16:20
• I want to show a fallback image, in case there is some issue with the first image – Ashish Aswal Commented Feb 12 at 8:22
• And what if there is some issue with the second image as well then ...? – C3roe Commented Feb 12 at 9:09
• In what situation would there be an issue with the first image? – asportnoy Commented Feb 12 at 20:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I looked around a bit and found a few answers to your problem with one already being on Stackoverflow.

Option 1: You can use CSS styling to change the image in case its broken

:before and :after don't apply to a img tag except its broken/not loaded

src: Inputting a default image in case the src attribute of an html <img> is not valid?

Option 2: You can add your image as an object. In case the object can't be loaded it will show the img

<object data=“image.url/that-may-or-may-not-exist.jpg" type=“image/jpeg”>
<img src=“https://fallback.url/for/image.jpg" alt=“Name” />
</object>

You can even put an object tag in the object tag to have 2 fallbacks

src: https://medium/@abhishekmicosoft/handling-img-fallback-307653b2f30

I hope you can fix your problem with this :)

本文标签： How can we set alternative fallback image instead of alternative text in emailStack Overflow