Данный подход справедлив только к статическим сайтам - где известно точное количество изображений и все они вручную прописаны в файле-библиотеки
) В реальных проектах - где количество изображений неизвестно и записывать путь к каждой картинке - не лучшее решение. Для этого в state из componentDidMount - ajax запроса будет передан путь к картинке которая храниться на сервере.
Как правильно вызывать
import Img1 from './img1.png';
import Img2 from './img1.png';
import Img3 from './img1.png';
export const images = { Img1, Img2: Img3 }import { images } from 'assets.js';
<ImgComponent src={images.Img1} />if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response);
} else {
return Promise.reject(response.json())
}export default function Home() {
const router = useRouter()
const id = router.query.id;
const [company, setCompany] = useState(null);
useEffect(() => {
fetch(`${url}/selectCompany`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: id
})
})
.then(response => response.json())
.then(result => setCompany(result));
}, [id, setCompany])
return company ? (
<div className="container">
<Head>
<title>Company</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<TopBar />
<GetCompanyPage company={company} />
<Footer />
</div>
) : null;
}const item = action.payload
const existItem = state.asideItems.find(item => action.payload.id === item.id);
if(existItem)
{
return{
...state,
asideItems: state.asideItems.map(currentItem => item.id === currentItem.id ? { ...currentItem, quantity: currentItem.quantity + 1 } : currentItem),
total: state.total + item.price,
}
}