Webpack, сгенерированный JavaScript HTML (DOM Manipulation) w. Изображений

Question

У меня есть файл JSON (file.json), и в этом файле есть массив с несколькими локальными URL-адресами.

[
    "./img/sample.jpg",
    "./img/example.jpg",
    "./img/image.jpg",
    "./img/img.jpg"
]

Теперь в моем src/index.html я импортировал этот файл, а forEach() это в переменную, которую я добавлю позже в DOM.

import file from './file.json';

var fcode = "";
file.forEach((element, index) => {
  let lcode = `
    <li><img src="${element}">${index}</li>
  `
  fcode += lcode;
});
$("ul").html(fcode);

В результате получается следующее

<ul> <!--The UL is allready in the DOM-->
    <li><img src="./img/sample.jpg">0</li>
    <li><img src="./img/example.jpg">1</li>
    <li><img src="./img/image.jpg">2</li>
    <li><img src="./img/img.jpg">3</li>
</ul>

Но изображений там нет.

Я хочу, чтобы этот веб-пакет включал в сборку изображения из JSON, а также помечал имена (и путь) этих изображений в файле JSOn.(Это 32 случайных символа имени файла)