Jeden z najczęściej powtarzających się problemów z jakimi się stykam u innych. Nie wyświetla się obrazek, nie wyświetla się WŁAŚCIWY obrazek, dlaczego obrazek TAK się wyświetla?
Od czego zacząć rozwiązywanie problemu? Podpowiedź znajdziecie w artykule.
Przypominam, że artykuły w kategorii „Porady blogowe” są pisane dla osób bez żadnego doświadczenia programistycznego. Przedstawione treści mogą wydawać się banalne, ale są to rzeczywiste przypadki, w rozwiązaniu których pomagałam. Tylko się wydaje, że tak łatwo znaleźć odpowiedź.
Naszym pierwszym krokiem powinien być Chrome DevTools. Swojego czasu popełniłam krótki filmik na jego temat:
Możecie podejrzeć w ten sposób i zbadać dowolny element na stronie.
Po lewej widzisz badaną stronę, po prawej okno DevTools. Lewą część tego okna zajmuje kod HTML, prawą – CSS, na dole jest konsola. Więcej szczegółów w tym temacie pojawi się jeszcze na blogu.
Załóżmy teraz, że nie wyświetla Ci się obrazek w nagłówku posta. Badając obrazek mamy poniższy widok:
Po najechaniu na znacznik <img> widzisz obrazek w podglądzie. Podgląd jest pusty? Albo zawiera przekreślony kwadrat? Bądź też nie ten obrazek co trzeba?
Masz odpowiedź 🙂 Problemem może być zła ścieżka do załączonego obrazka albo wręcz brak obrazka w spodziewanym miejscu.
Jak to sprawdzić? Przeklej adres spod atrybutu „src”. W tym przypadku:
<img src=”http://i2.wp.com/nettelog.pl/wp-content/uploads/2016/09/frontend.jpg?fit=960%2C639″ …>
Więcej na temat Chrome DevTools znajdziesz na oficjalnej stronie narzędzia.
Znajomość tego narzędzia to podstawa jeśli myślisz o samodzielnym rozwiązywaniu problemów na blogu czy stronie!
Powodzenia!
W razie pytań czy problemów zapraszam do komentarzy.
A jeśli masz inny problem na blogu czy stronie – zapraszam również do grupy wsparcia, gdzie m.in. zajmujemy się problemami programistycznymi na blogach i stronach.
