Проблема с добавлением изображений в цикле в html, выполненном из javascript

ProgramBox

Проблема с добавлением изображений в цикле в html, выполненном из javascript

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript #html

Вопрос:

Я пытаюсь добавить изображения в цикл «для»

 <div id="p_0" style="text-align:right">
            <picture style="text-align:right;visibility:visible">

                <img src="~/lib/images/Wisielec1.png" alt="Wisielec" style="width:100px;margin-left:inherit">
            </picture>
        </div>
@for(int i = 1; i < 6; i  )
    {
    <div id="p_@i" style="text-align:right">
        <picture style="text-align:right;visibility:visible">
           <img id="pi_@i" src="" alt="Wisielec" style="width:100px;margin-left:inherit">
        </picture>
    </div>
    }

поэтому в JavaScript у меня есть

 var images = ['Wisielec1.png', 'Wisielec2.png', 'Wisielec3.png', 'Wisielec4.png', 'Wisielec5.png', 'Wisielec6.png' ];
            document.getElementById("pi_"   j).src = "~/lib/images/"  images[j];

Но когда я загружаю страницу, в папке /lib/изображений, видимых в инструментах разработчика, нет изображений.
Нужно ли мне куда-то прикреплять эту папку, чтобы фотографии загружались на сервер?
Я могу видеть картинки только тогда, когда я ввожу путь к определенной картинке в html-коде. В консоли у меня ошибка :
Да, я получаю ошибку «Wisielec2.png:1 ПОЛУЧИТЬ https://localhost:44320/Home/~/lib/изображения/Wisielec2.png 404

1. «в папке /библиотеке/изображения нет изображений, видимых в инструментах разработчика» — Можете ли вы описать проблему более конкретно? Вы делаете конкретный запрос на изображение, которое, как вы ожидаете, вернет действительное изображение? Что это за запрошенный URL-адрес? Почему именно вы ожидаете, что по этому URL-адресу будет файл изображения? Каков ответ сервера? Как вы определили, что проблема заключается в цикле , как следует из вопроса? Что конкретно терпит неудачу?

2. когда вы перезагрузите страницу, изображение наверняка исчезнет, если только нет кода html / сервера, который показывает эти изображения. Пожалуйста, предоставьте дополнительную информацию / код, например, разметку html, которая отображает эти изображения

3. Можете ли вы привести пример src , который вам подходит?

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

5. Вы убедились document.getElementById("pi_" j).src = "~/lib/images/" images[j]; , что это делает то, что должно? Вы получаете какие-либо ошибки консоли? Отображается ли src в инспекторе так, как ожидалось?

Ответ №1:

Это выглядит неправильно:

 "~/lib/images/"

Почему вы используете a ~ в начале пути? Обратите внимание, что он делает с URL-адресом:

 https://localhost:44320/Home/~/lib/images/Wisielec2.png

Это не имеет никакого отношения к коду, который вы пишете, вы просто используете неверный URL-адрес. Если /Home находится в корне вашего сайта, просто используйте это:

 "/Home/lib/images/"

Или, возможно, используйте относительный путь, основанный на том, откуда вы его вызываете:

 "../lib/images/"

В основном вам нужно определить, какой на самом деле правильный URL-адрес для ваших изображений, и использовать его.

1. Я не обратил на это внимания, потому что это работало с ~ в первом div, но сейчас это действительно работает, спасибо!

2. @Vipp90: Если вы используете какой-либо серверный код или фреймворк, это может привести к изменению ваших путей перед их возвратом клиенту. Всегда стоит заглянуть в инструменты разработки вашего браузера, чтобы изучить фактический код/разметку на стороне клиента.

Метки: выполненном из javascript, Проблема с добавлением изображений в цикле в html