Я не вижу файл .png как изображение, но как фоновое изображение это работает - PullRequest
Новая
       25

Я не вижу файл .png как изображение, но как фоновое изображение это работает

0 голосов
/ 12 июня 2019

Я создаю целевую страницу и хочу разместить там png изображений ссылки, но они не отображаются. Когда я установил png в качестве фонового изображения, я увидел его на странице, но обычный <img> не работает. Путь к файлу в порядке, я в этом уверен, но консоль говорит "404 file not found". Когда я использую тот же путь, что и для bg image, он работает отлично, я не знаю почему ... Я пишу стили в SCSS и использование компонентов для различных частей сайта, если это имеет значение. Пожалуйста, помогите, я новый T.T

вот ссылки 

<div id='media'>
    <a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
        <img src="/src/images/facebook.png" alt="ikona facebooka">
    </a>
    <a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
        <img src="/src/images/linkedin.png" alt="ikona linkedin">
    </a>
</div>

и структура моих папок выглядит так: 

./src:
 ../fonts
 ../images<--here are the png files
 ../js
 ../sass
 ../templates:
   .../components
   ...index.html
./web:
 ../css
 ../images
 ..index.html

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Ваш файл styles.css находится в другом месте, чем файлы шаблона, поэтому путь ДОЛЖЕН быть другим.

Из вашего местоположения таблицы стилей web/css/style.css -> ../../src/images/filename.png

Из вашего местоположения шаблона src/templates/index.html -> ../../web/images/filename.png

Вот что нужно сделать для поиска путей к файлам:

  • Открыть инструменты разработчика => вкладка сети (выберите images в вашем случае)
  • Найдите файл, о котором идет речь
  • Если это 404, ваш путь может быть плохим.
  • Попробуйте загрузить изображение в новой вкладке браузера с полным URL-адресом, который, по вашему мнению, должен быть. ( убедитесь, что он работает правильно )
  • Затем проверьте, что полный / обслуживающий файл URL совпадает с URL в вашем коде

Это сайт WordPress? Если это так, обязательно выведите полный путь с помощью 

<?php bloginfo('template_directory'); ?>/path/filename.jpg
0 голосов
/ 12 июня 2019

Удалить '/' из начала пути изображения. Так что измени это: 

<img src="/src/images/facebook.png" alt="ikona facebooka">

К этому: 

<img src="src/images/facebook.png" alt="ikona facebooka">
...