Magento images are not displaying in Vue-StoreFront

Question

Magento images are not displaying in Vue-StoreFront

anirudh3333 opened this issue 6 years ago · comments

Anirudh Gurumurthi commented 6 years ago

Hello,

I successfully connected Magento to Vue-StoreFront. I'm able to get all products in Vue-StoreFront which are added in Magento. But I'm unable to get Magento product images in Vue-StoreFront.

How I will get my Magento product images in Vue-StoreFront??

When I was installing Vue-StoreFront it was asked for image path , which path we need to provide there?either Magento image path or Vue-StoreFront path??
I have imagemagic also, still it is not working.
Anyone please help me.

Thanks in advance :),
Anirudh.

Laurent Michel · Answer 1 · Mon Aug 27 2018 19:47:23 GMT+0800 (China Standard Time)

Please have a look at this: #28 as I had the very same problem yesterday.

Anirudh Gurumurthi · Answer 2 · Wed Aug 29 2018 18:01:33 GMT+0800 (China Standard Time)

Hello,

Here I'm getting the images path in vue-storefront like

<img lazy="error" data-src="http://magento-sample-url/pub/media/catalog/product/310/300/resize/s/h/shirt_1.jpeg" alt="Ctel Shirts" src="/assets/placeholder.jpg" data-testid="productImage" data-v-af5f87e8="" height="300" width="310">

if I remove "310/300/resize" from the src URL I am able get the image in browser.

What is the issue?What I need to change?

Darwex · Answer 3 · Thu Nov 08 2018 21:33:15 GMT+0800 (China Standard Time)

Hi.

I had the same issue, there was wrong url in generated config inside vue-storefront-api. I had to change value inside vue-storefront-api/config/local.json section magento2.imgUrl to "https://your.magento.host/pub/media/catalog/product".

Danusorn Taboonyong · Answer 4 · Thu Dec 13 2018 18:11:28 GMT+0800 (China Standard Time)

Hello,

Here I'm getting the images path in vue-storefront like

<img lazy="error" data-src="http://magento-sample-url/pub/media/catalog/product/310/300/resize/s/h/shirt_1.jpeg" alt="Ctel Shirts" src="/assets/placeholder.jpg" data-testid="productImage" data-v-af5f87e8="" height="300" width="310">

if I remove "310/300/resize" from the src URL I am able get the image in browser.

What is the issue?What I need to change?

same problem do you have any idea for this ?

Piotr Karwatka · Answer 5 · Thu Dec 13 2018 18:13:03 GMT+0800 (China Standard Time)

You need to set magento2 img url (/pub/media/catalog ...) in the vue-storefront-api/config/local.json. Then in the vue-storefront You need to set images.baseUrl to point to vue-storefront-api which is usually: localhost:8080/img

Danusorn Taboonyong · Answer 6 · Thu Dec 13 2018 18:24:00 GMT+0800 (China Standard Time)

i change config in vue-storefront-api and run yarn dev to recomplie . but it got some error
uncaughtException: listen EADDRINUSE 127.0.0.1:8080

Krister Andersson · Answer 7 · Thu Dec 20 2018 04:17:42 GMT+0800 (China Standard Time)

@parnus01 - The error message tells you that your vue-storefront-api instance is already running so you will need to terminate and restart the current node application.

Łukasz Romanowicz · Answer 8 · Fri Jul 12 2019 03:23:02 GMT+0800 (China Standard Time)

Closing due to OP inactivity.

rahuljajra · Answer 9 · Mon Nov 18 2019 21:17:04 GMT+0800 (China Standard Time)

Hello,

I successfully connected Magento to Vue-StoreFront. I'm able to get all products in Vue-StoreFront which are added in Magento. But I'm unable to get Magento product images in Vue-StoreFront.

How I will get my Magento product images in Vue-StoreFront??

When I was installing Vue-StoreFront it was asked for image path , which path we need to provide there?either Magento image path or Vue-StoreFront path??
I have imagemagic also, still it is not working.
Anyone please help me.

Thanks in advance :),
Anirudh.

can you please advise how to Integrate Vue-storefront with local Magento.
I have tried with all steps but not successfully integrated

Anirudh Gurumurthi · Answer 10 · Mon Nov 18 2019 22:09:04 GMT+0800 (China Standard Time)

Hello Rahul, For that you have to install image magick(PHP-ImageMagick extension). One try with that.

…

On Mon, Nov 18, 2019, 6:47 PM rahuljajra ***@***.***> wrote: Hello, I successfully connected Magento to Vue-StoreFront. I'm able to get all products in Vue-StoreFront which are added in Magento. *But I'm unable to get Magento product images in Vue-StoreFront.* *How I will get my Magento product images in Vue-StoreFront??* When I was installing Vue-StoreFront it was asked for image path , which path we need to provide there?either Magento image path or Vue-StoreFront path?? *I have imagemagic also, still it is not working.* Anyone please help me. Thanks in advance :), Anirudh. can you please advise how to Integrate Vue-storefront with local Magento. I have tried with all steps but not successfully integrated — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#29>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHLXZ4G2VZNJH3IX5GAEIYDQUKIVFANCNFSM4FRVEIBQ> .

rahuljajra · Answer 11 · Tue Nov 19 2019 12:57:33 GMT+0800 (China Standard Time)

Hello Rahul, For that you have to install image magick(PHP-ImageMagick extension). One try with that.

What is the role of this extension?
I followed below some steps to connect magento2 with vue-storefront

Cloned vue-storefront-api as per documentation and run with following commands
Cloned Vue-storefront as per documentation and run with following commands
Cloned Mage2vuefrontstore (mage2nosql) and run the following commands.
In local Magento admin panel system -> Integration -> done all steps in documentation

kindly let me know if anything missed

Chiragsorathiya · Answer 12 · Tue Mar 17 2020 19:01:27 GMT+0800 (China Standard Time)

Hello team i have same problem i can't see product image

Dave Van Herck · Answer 13 · Wed Jul 29 2020 21:11:07 GMT+0800 (China Standard Time)

I have the same problem here

Suraj Prajapat · Answer 14 · Fri Jul 16 2021 21:09:09 GMT+0800 (China Standard Time)

still this issue not solved.