Как отображать локальные изображения с помощью плоского списка?

Question

Я хочу создать офлайн-приложение с 200 изображениями. Я хочу визуализировать эти изображения с помощью плоского списка. Могу ли я сохранить эти изображения в папке проекта и создать файл json с исходным кодом для этих изображений? Или как лучше это сделать

Answer 1

Если вы имеете дело с большим количеством изображений, тогда ваш файл images.js будет трудно поддерживать, в этом случае вы можете попробовать использовать плагин, например https://github.com/dushaobindoudou/babel-plugin-require-all а затем напишите небольшой скрипт, который создаст словарь ваших изображений, например:

// prepareImages.js
const fs = require("fs");
const files = fs.readdirSync("./assets/images").filter(x => x.includes("png"));
const ex = "{\n" +
files.map(x => `"${x.split(".png")[0]}": require("./${x}"),`).join("\n") + "}";
const res = "export default " + ex;
fs.writeFileSync("./assets/images/index.js", res);