Pracując w tym tygodniu nad oceną do domu, napotkałem problem, o którym nigdy wcześniej nie myślałem: co się dzieje, gdy uszkodzony jest kod źródłowy obrazu?

To nie jest słodkie. Ponadto, jeśli używasz jakiegokolwiek rodzaju formatowania lub stylizacji na swojej stronie, może to naprawdę rzucić wszystko na klucz.

W przypadku mojej oceny do domu jedno z zadań wymagało ode mnie przejrzenia niektórych danych i stworzenia „spisu zespołu”, w którym każdy członek zespołu ma kartę zawierającą zdjęcie profilowe wraz z imieniem i nazwiskiem, tytułem i biografią. Chciałem, aby wszystkie obrazy miały spójny rozmiar, co pięknie współpracowało z CSS, dopóki… nie zdałem sobie sprawy, że jeden z adresów URL src obrazu został uszkodzony. Zepsuta ikona obrazu zagłady pojawiła się na ekranie i zepsuła całą moją ciężką pracę i formatowanie.

Co ma zrobić kiepski programista? Tutaj zamierzam przejść przez proces naprawiania tego małego problemu w twoich aplikacjach React!

Krok 1: Wybierz domyślny obraz

Zdecyduj się na domyślny obraz, który zastąpi SRC, jeśli twój obraz jest uszkodzony! Możesz wybrać, co chcesz: sylwetkę głowy, „oj, ten obrazek jest zepsuty”, a nawet corgi z pyszczkiem pośrodku kromki chleba:

Z taką twarzą kogo obchodzi, że obraz jest uszkodzony, prawda?

Krok 2: Upewnij się, że zawsze dołączasz alternatywną właściwość

To powszechna wiedza, ale chciałem tylko przypomnieć, aby zawsze uwzględniać tę altwłaściwość we wszystkich imgużywanych tagach. Jest to ważne nie tylko w sytuacjach, w których obraz jest uszkodzony, ale także dla czytników ekranu, aby Twoja aplikacja była bardziej dostępna. Jeśli nie jesteś zaznajomiony, wygląda to tak:

<img src="www.dog-pics.com" alt="funny picture of a corgi">

Teraz stworzymy funkcję wewnątrz naszego komponentu React, która zmieni kod SRC na wybrany przez nas domyślny obraz.

const addDefaultImg = ev => {
   ev.target.src = "default-dog.jpg"
}

Krok 4: Użyj onError do wywołania funkcji

Aby wywołać tę funkcję, użyjemy onErrorwłaściwości, którą React ma w swoim frameworku, która jest wywoływana za każdym razem, gdy wystąpi błąd podczas renderowania tagu (tzn. gdy źródło jest zepsute). Sprawdź to:

<img src="www.dog-pics.com" alt="funny picture of a corgi" onError={addDefaultImg}>

I to wszystko! Super szybki sposób na dodanie domyślnego obrazu na wypadek, gdyby któryś z Twoich się zepsuł i szybko go nie złapiesz. Udanego kodowania!