недавній випадок, коли я зіткнувся з проблемою, де URL зображення в JSON файлі не працював.
У моєму випадку корінь проблеми полягав у відносності структури директорій. Це було завданням для фронтенд-менторів, тому деякі частини, такі як активи, зображення, були відносними та зазначені в JSON файлі, як показано нижче:
{
"image": {
"thumbnail": "./assets/images/image-waffle-thumbnail.jpg",
"mobile": "./assets/images/image-waffle-mobile.jpg",
"tablet": "./assets/images/image-waffle-tablet.jpg",
"desktop": "./assets/images/image-waffle-desktop.jpg"
},
"name": "Вафлі з ягодами",
"category": "Вафлі",
"price": 6.50
}
ПРИЧИНА: Для кращої ієрархії папок я створив додаткову папку "code", в якій помістив свої файли HTML, CSS та JS. Це порушило відносність URL під час отримання зображення з JSON файлу за допомогою JavaScript.
РІШЕННЯ: Я видалив папку "code" та розмістив усі файли коду в головній директорії, що допомогло вирішити проблему. Або вам доведеться вручну змінити шляхи URL!
Перекладено з: Failed to load resource : the server responded with a status of 404 (Not found)- JSON image failed to load