Заставить изображение alt text выглядеть практически одинаково во всех браузерах - PullRequest
Новая
       18

Заставить изображение alt text выглядеть практически одинаково во всех браузерах

1 голос
/ 25 сентября 2019

Используя React, я работаю над шаблоном электронной почты.Письмо получает логотип моей компании.Мы не хотим, чтобы изображение сохранялось локально или удаленно, поэтому я решил использовать base64.К сожалению, base64 не работает на всех почтовых клиентах (я смотрю на вас Gmail).Сейчас я буду использовать альтернативный текст с пользовательским стилем (позже я рассмотрю параметры вложения электронной почты с помощью express-mailer и nodemailer).

Проблема с альтернативным текстом заключается в том, что каждый браузер отображает егонемного по-другому.Chrome & Edge отображает значок разбитого изображения, Safari, Outlook App отображают границу вокруг альтернативного текста.

Я хочу, чтобы альтернативный текст выглядел практически одинаково во всех браузерах и почтовых клиентах

I 'Я попробовал пару вещей.

__

  1. Я попытался избавиться от испорченного изображения с помощью ошибки в моем теге img
  2. Я попытался использовать componentDidMount
  3. Я попытался использовать элемент object для обтекания тега img, который по умолчанию ничего не отображает при возникновении ошибки.С помощью тега объекта я попытался добавить альтернативный текст в теги ALT Text.Я также пытался использовать псевдо-селектор :: после тега объекта

Ничего не помогло: (

1. 

<img src="src.png" alt"Logo text here" onerror="this.style.display='none'"/>

2. 

componentDidMount() {
  document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
    img.onerror = function(){this.style.display='none';};
   })
  });
}

3. 

<object data="src.png" type="image/png">
  <img src="src.png" alt"Logo text here" />
</object>

3. 

<object data="src.png" type="image/png">
  <img src="src.png" alt"Logo text here" />
  Logo text here
</object>

3. 

<object data="src.png" type="image/png">
  <img src="src.png" />
</object>

object::after {
 content: "Logo text here";
}

Ничего не работает: /

Я был бы признателен за некоторую помощь и надеюсь, что то, о чем я прошу, имеет смысл и выполнимо.

1 Ответ

0 голосов
/ 25 сентября 2019

Можете ли вы попробовать использовать этот CSS: 

img {
  font-family: "Helvetica";
  font-weight: 300;
  line-height: 2;
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:after {
  content: "\f1c5"" " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
<img src="./test.jpg" alt="test"/>

Примечание: в этом контексте отсутствует Font-awesome, вы можете включить его для проверки.

...