Внешние изображения CSS не загружаются

Добрый день.Внешние изображения CSS не загружаются

Моя структура такова:

/ 
    index.html 
    style/ 
    main.css 
    images/ 
    test/ 
    test.html

/style/main.css говорит что-то вроде этого:

body { 
    background-image: url('/images/SomeImage.png'); 
    background-color: #000; 
}

/index.html имеет ссылку на этот файл CSS , но, как говорится в названии, изображение не загружается. Но это связано, хотя, потому что фон действительно черный, поэтому остальная часть стиля (но изображений) действительно работает.

Кроме того, если я напишу один и тот же стиль внутри на /index.html фон загрузится.

Кроме того, я создал /test/test.html, который ничего не говорит, но

<img src="/images/SomeImage.png" />

и изображение отображается на этой странице.

Таким образом, по какой-то причине мой /style/main.css не может связаться с файлами, чтобы достигнуть любого другого файла из любого другого местоположения. Почему это происходит? В синтаксисе явно нет ничего плохого. Я потерялся.

источник

2015-04-09 Ivan Chepurin

Используете ли вы базовый тег HTML в index.html? – Stefan

Добавление ** ../** здесь нет. Как уже упоминалось, _/test/test.html_ не использует его и продолжает работать. Также у меня есть локальная настройка сервера, так что **/** означает корень. –

@Stefan Нет, я не использую . –

Поскольку ваше изображение находится в другой папке (на уровне выше вашей таблицы стилей), вам нужно начать с «../» для папки уровня вверх в иерархии относительно таблицы стилей. Так что вам нужно относительный URL:

background-image: url('../images/SomeImage.png');

источник

2015-04-09 10:30:29 Rokin

Я не думаю, что это необходимо. Вы должны иметь возможность создавать корневые относительные URL-адреса, начиная с /. – Stefan

Как таблица стилей знает, где находится корень? – Rokin

Потому что корень у корня! – Stefan

надстройку ../ к началу/изображения, так что прочитать ../images/imagename.jpg

Вот что ваш код должен быть:

body { 
background-image: url('../images/SomeImage.png'); 
background-color: #000; 
}

источник

2015-04-09 10:30:52

? Его код уже имеет/в начале URL-адресов. – Stefan

Не на CSS :) –

Нет, его css находится в папке css, его код ищет папку с изображениями в папке css, ей нужно отступить к родительскому «../», а затем искать папку с изображениями , –

Первоначально, похоже, что ваш код в порядке.

Итак, откуда вы узнали, что изображение не загружается? Ознакомьтесь с инструментами разработчика вашего браузера, чтобы узнать, загружается ли изображение, или возвращается ошибка или даже не упоминается. Я предполагаю, что это загрузка, но не отображение из-за чего-то в вашем CSS.

источник

2015-04-09 10:33:49

Итак, я проверил свои инструменты для разработчиков, и я заметил, что он пытался загрузить изображения из неправильных каталогов, например _/style/images/SomeImage.png_ вместо _/images/SomeImage.png/_. И для меня это было очень неожиданно, потому что я уже пробовал ** ../**, и это не сработало. Итак, я заметил, что он не реагировал на какие-либо изменения, внесенные в файл ** main.css **, поэтому я сохранил тот же самый файл CSS с другим именем ** test.css **, изменил ссылку в ** index.html ** и BAM! Оно работает. Два похожих файла в одном каталоге. Один работает так, как ожидалось, другой - нет. Есть идеи? –

@IvanChepurin Вероятно, проблема с кешированием. Отключите кеш браузера и посмотрите, работает ли это. –

Попробуйте скопировать веб-страницу, css и пример изображения в одной папке временно. Затем используйте только имя изображения для URL-адреса и посмотрите, что произойдет. Если это сработает, это будет путь к изображению, если не что-то другое. Возможно, позиция .. это полный css, который вы публикуете?

источник

2015-04-09 10:57:23 johnyTee

, если вы находитесь в /styles/style.css вам нужно добавить:

../ 2 уровней назад, чтобы попасть в корневой папке.

Итак, как Rokin ответил:

background-image: url('../images/SomeImage.png');

это способ сделать это.

Чтобы связать CSS в файле индекса используйте следующее:

<link href="./style/style.css" rel='stylesheet' type='text/css'>

./ 1 уровень назад в index.html, чтобы достигнуть корневой папки.

Кроме того, ваша проблема также может быть проблемой разрешения файлов. Я всегда сталкиваюсь с этой проблемой, когда загружаю изображения из своей электронной почты и использую их напрямую.

Если вы работаете локально на макинтош:

- Right click on the selected image 
- click on **get info** 
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**

Если вы работаете непосредственно на живом сервере:

- login using FTP (with any ftp client such as File Zilla) 
- Go to the selected image 
- Right click and select file permissions 
- set permissions to : **664**

источник

2015-04-09 11:00:50 Marounm

Нет, разрешения в порядке. ** ../** не работает и здесь нет. –

можно загрузить все файлы на любой веб-сервер и поделиться ссылкой, чтобы мы могли проверить – Marounm

Итак, в принципе, я заменил не-работает /style/main.css с его копией (test.css - описано в комментариях комментариев), и теперь это работает. Почему все еще вопрос, но проблема решена, я думаю.

источник

2015-04-09 11:42:10

Внешние изображения CSS не загружаются

ответ

Смежные вопросы