Img src как исправить - Autoru.top - решение различных проблем

Почему не отображается картинка на сайте?

Давно я уже не писал ничего для новичков, в основном, пишу уже для достаточно опытных специалистов. Поэтому чтобы исправить это положение, я решил написать статью по теме наиболее частого вопроса, который я постоянно получаю: «Почему не отображается картинка на сайте?«. В этой статье я постараюсь разобрать все причины, почему изображение не появляется на сайте на основании того, что я видел у своих учеников.

Не будем тянуть резину, а сразу перейдём к делу.

Первая ошибка

<img scr="image.jpg" alt="Картинка" />

Тот, кто уже хорошо знает HTML, мгновенно найдёт в данном коде ошибку. А ошибка здесь синтаксическая, так как атрибута «scr» не существует, а правильно писать «src«. Ошибка очень распространена, поэтому я решил её поставить первой.

Вторая ошибка

<img src="image.jpg" alt="Картинка" />

Здесь никаких ошибок в коде не имеется, однако, если копнуть глубже, то название картинки, скорее всего, указано неправильно. Очень часто в ОС отключён показ расширений файлов, как следствие, image.jpg — это только имя файла, без расширения. Для решения проблемы надо включить показ расширений файлов в свойстве папок, далее увидеть, что файл называется, например, так: «image.jpg.png«, и это имя прописать в src.

Третья ошибка

<img src="image.jpg" alt="Картинка" />

Снова код правильный, однако, картинка всё равно не отображается. Если не помог предыдущий пункт, то, скорее всего, в браузере просто отключён показ картинок. Включите показ картинок в браузере, и Ваше изображение должно будет появиться.

Четвёртая ошибка

<img src="images/image.jpg" alt="Картинка" />

Очень часто ошибка состоит в том, что путь написан с ошибкой. А этот путь они просто откуда-то сдирают (с моего сайта, с книг, с моих курсов или ещё откуда-нибудь), не подумав о том, что это только путь, а не сама картинка. И по нему должна находиться само изображение. В большинстве случаев, её и близко нет. Иногда картинка имеется, но путь написан неправильно. Здесь надо просто уметь писать относительные пути. Начинается всё от каталога, в котором находится данная страница, далее пишем каталог, в котором находится картинка, а затем через слеш пишем название картинки. Если есть ещё один каталог на пути к картинке, то пишем и его (например, так: «images/photo/user1.jpg«). Если сама страница находится во внутреннем каталоге, также как и картинка, то нужно использовать «../» (например, так: «../images/image.jpg«). Всё просто, но вот возникают почему-то проблемы.

Я разобрал все ошибки, которые мне удалось вспомнить в своей практике. Если у Вас не отображается картинка на сайте, то 99.9% того, что решение Вы найдёте здесь, поэтому внимательно просмотрите всю статью и подумайте, что у Вас не так. И всегда помните, что ошибка может быть комплексной. Например, синтаксическая ошибка, путь указан неверно, да и имя неправильно написано. Такое тоже бывает, поэтому проверяйте себя на каждой ошибке, и после их исправления картинка обязательно появится на Вашем сайте.

Создано 07.05.2012 14:02:48
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Как можно убрать www.example.ru из src?

<textarea id="content" cols="60" rows="10">
    <div id="description"><div style="text-align: center;">

        <img alt="Стенд и картинки для уголка безопасности" border="0"
            src="www.example.ru/images/goods/umey_deystvovat.jpg"
            title="Стенд и картинки для уголка безопасности">

        <img alt="Пожарная безопасность в школе" border="0"
            src="www.example.ru/images/goods/pb_foto_2.jpg"
            title="Пожарная безопасность в школе">
    </div>

    <img src="cat.jpg">
</textarea>

Doofy

3,8473 золотых знака19 серебряных знаков35 бронзовых знаков

задан 26 июн 2016 в 8:25

можно добавить id=»needtodelete» у элемента и будет так

<textarea id="content" cols="60" rows="10">
<div id="description"><div style="text-align: center;">
<img id="needtodelete" alt="Стенд и картинки для уголка безопасности" border="0" src="www.example.ru/images/goods/umey_deystvovat.jpg" title="Стенд и картинки для уголка безопасности" />  
<img alt="Пожарная безопасность в школе" border="0" src="www.example.ru/images/goods/pb_foto_2.jpg" title="Пожарная безопасность в школе" />  
</div>

и потом
в скрипте :

var a=document.getElementById("needtodelete");
a.src=a.src.replace(/www.example.ru/g,"");

или ещё можно удалить до первого вхождения знака ‘/’

ответ дан 26 июн 2016 в 8:43

GetYouFunGetYouFun

4424 серебряных знака15 бронзовых знаков

вы писали

через id используя jquery я могу сделать, но как поменять сразу у всех
сооброжалки не хватает.

можно добавить класс «classname123» у каждого такого элемента и тогда

var a=document.getElementsByTagName("img");
for(i=0;i<a.length;i++)
    {
    if (a[i].className=="classname123")
        {
            a[i].src=...            
        }
    }

ответ дан 26 июн 2016 в 8:49

GetYouFunGetYouFun

4424 серебряных знака15 бронзовых знаков

У всех тегов <img> в документе поменять в атрибуте src подстроку можно примерно так:

В вашем вопросе код для замены находится внутри тега textarea, что делает весь этот html просто-текстом. Тогда менять нужно регуляркой, включающей в себя src=, и, опционально, проверкой, что строка «src» находится внутри «тега» <img>. Без лишних проверок:

var el = document.getElementById("content");
el.innerHTML = el
  .innerHTML
  .replace(/(src=")www.example.ru/ig, "$1")
;

<textarea id="content" cols="60" rows="10">
    <div id="description"><div style="text-align: center;">

        <img alt="Стенд и картинки для уголка безопасности" border="0"
            src="www.example.ru/images/goods/umey_deystvovat.jpg"
            title="Стенд и картинки для уголка безопасности">

        <img alt="Пожарная безопасность в школе" border="0"
            src="www.example.ru/images/goods/pb_foto_2.jpg"
            title="Пожарная безопасность в школе">
    </div>

    <img src="cat.jpg">
</textarea>

ответ дан 26 июн 2016 в 9:57

SergiksSergiks

30.7k4 золотых знака47 серебряных знаков85 бронзовых знаков

Например так на jQuery:

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

$("img[src]").each(function () {
    var link = parseUrl($(this).attr("src"));
  var output = link.pathname + link.search + link.hash;
  $(this).attr("src", output);
})

JSFiddle

ответ дан 26 июн 2016 в 8:55

blitsblits

9581 золотой знак7 серебряных знаков20 бронзовых знаков

Просто

textarea = document.querySelector('textarea');
textarea.innerHTML = textarea.innerHTML.replace(/(http|www).*ru//ig, '');

<textarea id="content" cols="60" rows="10">
    <div id="description"><div style="text-align: center;">

        <img alt="Стенд и картинки для уголка безопасности" border="0"
            src="https://www.example.ru/images/goods/umey_deystvovat.jpg"
            title="Стенд и картинки для уголка безопасности">

        <img alt="Пожарная безопасность в школе" border="0"
            src="www.example.ru/images/goods/pb_foto_2.jpg"
            title="Пожарная безопасность в школе">
    </div>

    <img src="cat.jpg">
</textarea>

ответ дан 26 июн 2016 в 10:44

DoofyDoofy

3,8473 золотых знака19 серебряных знаков35 бронзовых знаков

Источник

Почему изображение не показывается на сайте?

При тестировании веб-страницы на локальном компьютере все изображения обычно показываются корректно, однако после публикации на сайте возникает ситуация, что рисунки не видны. Это может происходить по ряду причин, рассмотренных далее.

Несовпадение регистра

В большинстве случаев в качестве операционной системы веб-сервера выступают Unix-подобные системы, которые различают регистр файла. Иными словами, файлы с именами PIC.gif, pic.gif и Pic.gif являются разными. При обращении из HTML-кода эту особенность необходимо учитывать и писать адрес изображения следует именно так, как он записан в системе. Чтобы не возникало путаницы, обычно договариваются, что все имена файлов и папок пишутся в нижнем регистре, также хранятся и документы.

Неверный адрес файла

Ошибка доступа к файлу часто возникает при неверной записи имени файла или папки где он хранится, т.е. из-за обычной опечатки. Также это происходит при неправильном указании относительного адреса файла вида ../../images/file.gif.

Использование локального адреса

Некоторые программы для редактирования HTML-кода добавляют изображения в виде локального адреса, начинающегося на ключевое слово file:///. Далее следует путь к файлу в виде строки c:/имя папки/имя файла. Изображение при этом исправно показывается на локальном компьютере, а на сервере нет, поскольку на нем не существует заданного пути. В подобных случаях достаточно заменить локальный адрес к файлу на относительный.

Проверка изображений

Проверка отображения рисунка может происходить тремя путями: корректность графического файла, правильность HTML-кода и ревизия со стороны сервера.

Проверка графического файла заключается в определении его целостности — файл не должен быть поврежден и обязан без проблем отображаться в браузере. Для этого в браузере достаточно ввести полный локальный путь к файлу, например file:///с:/www/girl.jpg.

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

<img  src="../images/Girl.Jpg" alt="Фотография">

Если файл записан на сервере как girl.jpg, то обращение к нему в примере некорректно.

Со стороны сервера также можно проверить путь к файлу и его имя. Для этого в браузере Firefox следует щелкнуть по рисунку (или по месту, где он должен быть) правой кнопкой мыши и в контекстном меню выбрать «Информация об изображении». Появится окно показанное на рис. 1.

Рис. 1. Абсолютный путь к графическому файлу

Пункт «Адрес» показывает, где, по мнению сервера, хранится изображение, а также в каком регистре задано имя. Сопоставляя эту информацию с имеющимся файлом, можно сделать вывод, почему изображение не показывается на странице.

Источник

I have uploaded my website however the img src tag do not work , as the pic is not visible, how can I rectify it.
In img src tag has the path where that pic is on my local machine.

img src=»D:OfficeWebsiteDance floor experimentpagesvideoHTMLContentScrollerassetsCorporate.jpg»

this is the path that I have

Thanks

asked Nov 23, 2012 at 20:22

user1791077user1791077

1017 silver badges19 bronze badges

When you upload website on a webserver, your img source, src, should reference an image that is publicly available.

Upload the image on your local machine to your webserver and change the src to reference that.

answered Nov 23, 2012 at 20:26

TeejTeej

12.7k9 gold badges72 silver badges93 bronze badges

Your website cannot access your local machine(as it is hosted on another machine—the server) and therefore it cannot find the image file it is looking for.

You have to upload the image file to the server and provide the path there.

Say if you upload the image file in the root folder, the src can simply be the «filename.extension». Just check the file path accordingly where you put the image file.

answered Nov 23, 2012 at 20:27

NitishNitish

2993 silver badges14 bronze badges

You should use relative paths when referencing images on a page. Let’s assume that your page file is in the ‘OfficeWebsite’ folder, your image tag will be:

<img src="Dance floor experimentpagesvideoHTMLContentScrollerassetsCorporate.jpg">

answered Nov 23, 2012 at 20:40

Nylo AndyNylo Andy

1521 silver badge9 bronze badges

Источник

Расскажем, что делать если картинка в тегах html не хочет отображаться…

Причин почему может не выводиться картинка в html довольно много. Рассмотрим самые частые ошибки синтаксиса.

[adace-ad id=»5173″]

Ошибка N1

Нарушен синтаксис атрибута src (написан как scr) тэга img. Явление этого сегодня довольно редкое, так как HTML-документы, как правило, пишутся в специализированных редакторах, которые подсвечивают правильно введённые тэги, атрибуты, спецсимволы. В комплексных средах разработки (DreamViever) подобная ошибка невозможна в принципе.

Ошибка №2

Почему не отображается картинка в html? Возможно синтаксис тега img и его атрибутов правильный, но неверно указано имя файла изображения.

Операционные системы по умолчанию скрывают расширение файла и поэтому картинка с именем picture.jpg.png в проводнике и диалоговых окнах открытия отображается как picture.jpg

Для исключения подобной ошибки необходимо в свойствах папки активировать показ расширения файлов.

Ошибка №3

Не верно указан полный путь к изображению в атрибуте src. Эта ошибка возникает вследствие механического копирования пути из другого HTML документа либо иного источника.

В HTML полный путь к любому файлу указывается относительно расположения страницы с которой осуществляется вызов. Если изображение находится во внутреннем по отношению к документу каталоге путь будет выглядеть так “имя внутреннего каталога/имя изображения”. Сам файл при этом может находится в других подкаталогах

Файл может находится еще и в нескольких подкаталогах. Именно поэтому проблема почему не отображается картинка в html немного сложнее чем может показаться сначала. Так в значении атрибута src указываются все подкаталоги.

Например: фотография myphoto.jpg находится в подкаталоге photo внутреннего каталога image. Значение атрибута src в этом случае прописывается как “image/photo/myphoto.jpg”.

Если изображение находится во внешнем по отношению к документу каталоге то прописывание полного пути начинается с “../”. Например: “../image/photo/myphoto.jpg”.

Ошибка №4

В браузере с помощью которого осуществляется просмотр документа отключен вывод изображений. В этом случае, если тэг img прописан полностью, то есть указан непустой атрибут alt будет выведено его значение. Например: при alt=”Моя фотография” отобразится «Моя фотография». При пустом или опущенном атрибуте alt большинство браузеров выводит пиктограмму изображения.

Таким образом, рассмотрев все четыре ошибки, ответить почему не отображается картинка в html гораздо проще…

Источник

Почему не отображается картинка на сайте?

Первая ошибка

Вторая ошибка

Третья ошибка

Четвёртая ошибка

Почему изображение не показывается на сайте?

Несовпадение регистра

Неверный адрес файла

Использование локального адреса

Проверка изображений

Расскажем, что делать если картинка в тегах html не хочет отображаться…

Ошибка N1

Ошибка №2

Ошибка №3

Ошибка №4

Не пропустите также: