загрузить изображения из JavaScript

Question

В моем приложении Grails у меня есть каталог web-app/images/carousel/slides, который содержит такие файлы, как:

• foo.png
• foo.thumbnail.png
• bar.png
• bar.thumbnail.png

Мое приложение использует плагин Grails для ресурсов, и основные изображения загружаются в GSP с помощью одного из его тегов:

<r:img file="carousel/slides/foo.png"/>

, который генерирует:

<img src="/myapp/static/images/carousel/slides/foo.png">

Я пытаюсь загрузить миниатюры изображений из JavaScript, создав путь, такой как /myapp/static/images/carousel/slides/foo.thumbnail.png. Но когда я пытаюсь отобразить одно из этих изображений, я получаю 404.

Аналогично, если ввести следующий путь в адресной строке браузера

http://localhost:8080/myapp/static/images/carousel/slides/foo.png

изображение отображается правильно, но если я введу

http://localhost:8080/myapp/static/images/carousel/slides/foo.thumbnail.png

Я получаю 404. Почему мои миниатюрные изображения не доступны по одному и тому же пути во время выполнения, если они находятся в одном и том же исходном каталоге? Я подозреваю, что ответ как-то связан с тем, что основные изображения загружаются с использованием структуры ресурсов, тогда как я пытаюсь загрузить миниатюры из JavaScript.

Answer 1

Вы в основном ответили на свой вопрос: если вы не ссылаетесь на изображения, используя ресурсы, они не обрабатываются.

Лучше всего создать модуль ресурсов, который содержит список всех изображений. Добавьте этот ресурс на страницу.

// grails-app/conf/CarouselResource.groovy
modules = {
    carousel {
        resource url:'/images/carousel/foo.jpg'
        resource url:'/images/carousel/foo.thumbnail.jpg'
        ...
    }
}

тогда в вашем GSP

<r:require module="carousel"/>

Теперь, описание модуля - это DSL, так что вы можете использовать какой-то цикл файлов для автоматического добавления всех файлов, но я не уверен на 100% как. Вы также можете попробовать что-то вроде '/images/carousel/**', но в документах не сказано, сработает ли это или нет.

---

Кроме того, я должен отметить, что если вы используете какой-либо из плагинов для ресурсов на основе кэширования, это не поможет. Затем вам нужно будет вручную вызвать r.img() и установить его в вашем JavaScript, что-то вроде этого (если это работает):

<r:script>
    var images = [
        '${r.img(...)}'
    ];
</r:script>

Это связано с тем, что URL-адреса, созданные с использованием, например, cached-resources , часто являются хешами содержимого файла, чтобы обеспечить долгосрочное кэширование. Они обычно только косвенно связаны с исходным именем файла.

---

Обновление на основе комментариев ниже:

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

<r:script>
    window.carouselImages = [
        {
            image: '${r.external(url:'images/carousel/image1.jpg'}.encodeAsJavaScript();}',
            thumbnail: '${r.external(url:'images/carousel/image1.thumbnail.jpg'}.encodeAsJavaScript();}'
        },
        ...
    ];
</r:script>
<r:resource url="js/carousel.js"/>

Затем в carousel.js вы ссылаетесь на window.carouselImages, чтобы получить массив изображений. Также должно быть возможно, чтобы он изменил порядок и использовал какой-то метод в carousel.js для добавления изображений, например:

<r:script>
    carousel.addImage('${r.external(url:'images/carousel/image1.jpg'}.encodeAsJavaScript();}', '${r.external(url:'images/carousel/image1.thumbnail.jpg'}.encodeAsJavaScript();}');
    ...
</r:script>

Вы можете улучшить это, зацикливая список файлов вместо того, чтобы явно кодировать каждое изображение (и пример был приведен в JIRA, который я опубликовал ниже).

---

Наконец, если вы не собираетесь использовать какие-либо плагины для кэширования или манипулирования файлами (чтобы файлы всегда заканчивались одним и тем же URL-адресом), вы можете просто зациклить файлы внутри контроллера или служебного метода. звонит r.img() на каждого. Это обеспечит их копирование в каталог static. Возвращаемое значение из r.img() можно игнорировать.

Answer 2

Вы можете использовать данные HTML5- * Атрибут

<element data-*="somevalue">

Вот пример, если ваше изображение находится в / grails-app / assets / images:

На странице (т.е. индекс.gsp) вы должны добавить следующее:

И из javascript все, что вам нужно сделать, это:

<script>
    var calImg = document.getElementById('calendar-icon').getAttribute('data-calendaricon');
</script>

Довольно просто, более того, это чистый подход:)