1

Всем привет!
Использую Parcel.js, начал писать код вывода картинок циклом и столкнулся с такой проблемой.
В документации сказано, что картинки выводятся через конструктор new URL().
Пример:

img.src = new URL('hero.jpg', import.meta.url);

Я пытался вывести картинки посредством цикла, написав примерно следующий код:

arrayImg.forEach(img => {
    let img = new URL(img, import.meta.url);
    ...
});

Но оказалось, что конструктор new URL() принимает только string literal — строку, окруженную двойными или одинарными кавычками.

The first argument must be a string literal to be recognized (not a variable or expression).

Проще говоря, вставлять в конструктор нужно путь к файлу вида '/src/img/image.png', но такой вариант для массовой выгрузки картинок не годится, не будешь же каждую картинку вручную прописывать в конструкторе

let img1 = new URL('/src/img/image1.png', import.meta.url);
let img2 = new URL('/src/img/image2.png', import.meta.url);
let img3 = new URL('/src/img/image3.png', import.meta.url);
let img4 = new URL('/src/img/image4.png', import.meta.url);
...

Помогите пожалуйста понять, как же мне вывести картинки циклом?

1 ответ 1

2

Никак, массово картинки в Parcel достаются с помощью Glob.
https://parceljs.org/features/dependency-resolution/#glob-specifiers

В вашем коде нужно будет прописать импорт картинок из нужной папки так

import img from '/img/*.jpg';

img будет содержать объекты ваших картинок вида

{
  'имя картинки': 'урл до нее'
}

После чего, сможете доставать эти картинки у себя в цикле используя img[imgName]

2
  • Спасибо) Но что делать, если нужно достать из папки не все картинки, или они разного расширения?
    – anket
    17 янв 2022 в 17:51
  • 1
    @anket Можете сделать отдельную папку только под нужные картинки и доставать оттуда. ЧТо касается разных расширений, можно например, прописать вторую строку import imgPng from '/img/*.png';, а потом объединить объекты img и imgPng
    – Pilaton
    17 янв 2022 в 20:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.