Блог

У меня небольшая проблема. Я не знаю, как динамично передавать эти локальные изображения.

Допустим, у меня есть API, который возвращает статическую схему хранилища 6 таким образом.

 stores: [{id:1, name: "Wallmart"}, {id: 2, name: "Amazon"}];  

и у меня есть несколько изображений под названием store1.jpg, store2.jpg …и т.д. Поэтому я импортирую такие изображения.

 import store1 from "./store1.jpg"  

Поэтому мне нужно динамично зацикливать эти изображения в соответствии с идентификатором.

 {  stores.map((store) =gt; (  lt;img src={`store${store.id}`} /gt;  ) }  

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

Забудьте об импорте изображений и просто используйте путь к изображениям в stores.map функции.

 lt;img src={"store"   store.id   ".jpg"} /gt;  

Я нашел решение такого типа, потому что выяснил, что у меня также есть цвета. Я добавляю все свои изображения в папку public/images

 export const stores : any = {  store1:{  id: 1,  src: "/images/store1.png",  tertiary: "#000",  primary: "#FFF",  },  store2:{  id: 2,  src: "/images/store2.png",  tertiary: "#999",  primary: "#aaa",  }    ... } 

поэтому я импортирую магазины и делаю такой цикл.

 import {stores} from "./constants"    {  store.map((item:any) =gt; (  lt;StoreCatalogCard  title={item.name}  img={stores[`store${item.id}`].src}  primaryColor={stores[`store${item.id}`].primary}  tertiaryColor={stores[`store${item.id}`].tertiary}  light={true}  /gt;  ))  }