Запасная проблема с изображением на NextJs ⇐ Html

[Anonymous]

Проблема: URL-адреса изображений Base64 Иногда разбивают пользовательский интерфейс вместо того, чтобы отступить < /h2>
Я рендерирую изображения в своем пользовательском интерфейсе с использованием URL-адресов JPEG, кодированного BASE64. В то время как некоторые изображения отображаются правильно, другие разбивают пользовательский интерфейс и показывают только текст Alt . Я ожидаю запасного пользовательского интерфейса (

Код: Выделить всё

"No Image"< /code> div) вместо того, чтобы рендеринг, когда изображение является недействительным. < /p>

 Вот код JSX, который я использую: < /h3>
{property.propertyContent[0].imageUrls.length > 0 ? (
[img]{property.propertyContent[0].imageUrls}
className="object-cover w-full h-full"
/>
) : (

No Image

)}
< /code>
Это работает только если: < /p>
[list]
[*]imageUrls.length > 0

[*]AND the Base64 string is valid.
[/list]
However, when imageUrls has a broken or invalid Base64 string (but still has length > 0), the image tag renders but fails to load — and the fallback div is never shown.

Чего я пытаюсь достичь
Я хочу изящно запасной к «без изображения» Когда:

• Строка Base64 отсутствует, или
• строка BASE64 InvendErid и
• . /> < /ul>
  
  Что я попробовал < /h3>
  
  Тернарные проверки на длину> 0 < /code> < /li>
  Проверка строк базовых 64 (некоторые не имеют формы) < /li>
  . URLS < /li>
  < /ul>
  
  ожидаемое поведение < /h3>
  Если изображение Base64 не загружается по какой-либо причине (необработанное или поврежденное), я хочу Изображение и показать плавный div < /press> writer: < /p>
  
  
  Подробнее здесь: https://stackoverflow.com/questions/796 ... -on-nextjs