Как загрузить локальные картинки в json? 0) './public/img/pic.webp' Вам следует перенести все изображения

Question

Как загрузить локальные картинки в json? 0) './public/img/pic.webp' Вам следует перенести все изображения

в папку 'public' и поправить пути до изображений. Ваш путь должен начинаться с / - это папка public и дальше путь до изображения относительно этой папки.

1)
Можно ваши картинки собрать в один json файл. Все картинки желательно оптимизировать под размер и качество)
Дальше их можно сложить в base64 и запаковать в json.

Дальше итерироваться по json и создавать объект дома. Например тег img и указывать src подобным образом.

2)
JSON, очевидно, для этого не предназначен.
Но если ты собираешь приложение webpack(раз React, то скорее всего), то у него есть фича require.context, которая позволяет забрать все нужные файлики из папки.

const r = require.context('./images/', false, /\.png$/);

const imagesMap = Object.fromEntries(r.keys().map((key) => [key, r(key)]));

console.log(imagesMap);

3)

Mapом генерируйте тег img и в атрибут src добавляйте значение поля thumbnailUrl

{clients && clients.map(client => (
<div className='photos-card'>
<p>{client.title}</p>
<img src={client.thumbnailUrl} alt={client.title} />
</div>
))}

#frontend #javascript #programming #react.js #russian

0

28.02.2023

1 ответов

14 просмотров

Игорь · Accepted Answer

Игорь

Спасибо большое!

0

28.02.2023

169 похожих чатов

Как загрузить локальные картинки в json? 0) './public/img/pic.webp' Вам следует перенести все изображения

1 ответов

Похожие вопросы