Я развернул свое приложение ReactJS на Netlify https://pwa -grocery-store.netlify.com / , при просмотре сайта в автономном режиме он загружает все статические изображения, которые хранятся в папке "src"но он не может загрузить изображения, загруженные из массива, которые хранятся в общей папке.Я предполагаю, что проблема связана или с изображениями, находящимися в общедоступной папке, или с тем, как к ним осуществляется доступ.
Я пытался сохранить изображения в src, но не могу получить к ним доступ из своего "файл data.js.Я также попытался импортировать изображения в файл «data.js», как если бы вы обычно импортировали реагирующее изображение, но это тоже не сработало.
Пример импорта img в data.js:
export const storeProducts = [
{
id: 1,
title: "Golden Delicious Apple 6 Pack",
img: "img/golden-apple.png",
price: 1.60,
category: "Fruit",
info:
"Description",
inCart: false,
count: 0,
total: 0
},
Products.js, где используется img:
export default class Product extends Component {
render() {
const {id, title, img, price, inCart} = this.props.product;
return (
<ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
<div className="card">
<ProductConsumer>
{(value) => (<div className="img-container p-5" onClick={() =>
value.handleDetail(id)
}>
<Link to="/details">
<img src={img} alt="product" className="card-img-top"/>
</Link>
<button className="cart-btn" disabled={inCart ? true : false} onClick={()=>{
value.addToCart(id);
value.openModal(id);
}}>
{inCart?(<p className="text-captilize mb-0" disabled>In Basket</p>):(<Basket src={basket}/>)}
</button>
</div>)}
</ProductConsumer>
Если вам поможет полный код, он находится на Github
Любая помощь будетбудьте очень благодарны, в идеале я буду в состоянии заставить изображения отображаться в автономном режиме, хранятся ли они в папке public или src.