Как получить ссылку на картинку по url из JSON?

Question

[Андрей Охотников]

Есть url вида befree.loc/swatches/ajax/media/?product_id=85072
При переходе по нему должна быть картинка, но по факту получаю вот такой json

{"large":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75\/948dca29020676657918de8c0c4c7381\/upload\/18315\/1831548578_75.jpg","medium":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75.jpg","small":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75.jpg","gallery":{"92701":{"large":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75\/948dca29020676657918de8c0c4c7381\/upload\/18315\/1831548578_75.jpg","medium":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75.jpg","small":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75.jpg"},"92702":{"large":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_1\/948dca29020676657918de8c0c4c7381\/upload\/18315\/1831548578_75_1.jpg","medium":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_1\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75_1.jpg","small":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_1\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75_1.jpg"},"92703":{"large":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_2\/948dca29020676657918de8c0c4c7381\/upload\/18315\/1831548578_75_2.jpg","medium":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_2\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75_2.jpg","small":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_2\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75_2.jpg"},"92704":{"large":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_3\/948dca29020676657918de8c0c4c7381\/upload\/18315\/1831548578_75_3.jpg","medium":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_3\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75_3.jpg","small":"http:\/\/befree.loc\/media\/catalog\/product\/cache\/1831548578_75_3\/c687aa7517cf01e65c009f6943c2b1e9\/upload\/18315\/1831548578_75_3.jpg"}}}

Т.е. я не могу подставить данную ссылку как src для img. Как через js обратиться к данному url и получить ссылку?

Comments

[Somewhere Intech]

У Вас не должно быть картинки, вообще из самого урл видно, что для ajax запросов страница. Если запросить асинхронно эту страницу и распарсить json, то получите объект, который хранит ссылки на изображений в large, medium и small размере. Также Вам выдается коллекция изображений (gallery) описанных в том же формате (l,m,s). Выбираете нужное и ставите src элементу img на странице, после чего уже браузер будет загружать саму картинку, а по окончанию покажет Вам

[Талян]

Фронтенд разработчик React & Redux

мне было бы стрёмно и безмерно стыдно ставить себе такую подпись, и задавать такой вопрос.

[mirexdoors]

Талян, фреймворки уже давно становятся "новым джеквери". Я имею ввиду, что видел некоторое количество людей, которые могут сделать достаточно аккуратно какой-то таск на реакте, но при этом, например, совсем не понимают что значит асинхронность итд

[Андрей Охотников]

Johnny Lowhunter, в том то и дело что это не страница для json запросов, таким образом не получить

[Somewhere Intech]

Андрей Охотников, Чтобы вы не думали о назначении страницы, бинарник она вам не отдаст, а отдаст json.
Если проще - вы сами себе противоречите, получая json по факту, хоть бога проси но картинку не увидишь (0o без обид)
Обратите лучше внимание на камент Таляна

[Robur]

Андрей Охотников, "не получить" это не описание проблемы и не вопрос.
Не получить так не получить, расходимся.
Напишите что за проблема, как получаете, какая ошибка, если хотите каких-то советов.

Answer 1

[DanKud]

const json = 'ваш_json';
const jsonObj = JSON.parse(json);
console.log(jsonObj); /* объект со всеми ссылками на картинки */
/* например */
console.log(jsonObj.medium); /* http://befree.loc/media/catalog/product/cache/1831548578_75/c687aa7517cf01e65c009f6943c2b1e9/upload/18315/1831548578_75.jpg */
/* и так далее */

Comments

[Андрей Охотников]

Вопрос в том как получить доступ к json :) по ajax не загрузить

[DanKud]

Андрей Охотников, почему не загрузить через AJAX? Кроссдоменный запрос? Тогда делайте запрос через PHP и AJAXом запрашивайте свой PHP-скрипт с ответом.

[Андрей Охотников]

Это я тупой оказался, давно так не тупил, получил json аяксом :)