Magento images are not displaying in Vue-StoreFront

[anirudh3333]

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.

[zadigus]

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

[anirudh3333]

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]

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".

[parnus01]

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 ?

[pkarw]

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

[parnus01]

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

[Cyclonecode]

@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.

[lukeromanowicz]

Closing due to OP inactivity.

[rahuljajra]

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

[anirudh3333]

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]

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

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

kindly let me know if anything missed

[Chiragsorathiya]

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

[davevh]

I have the same problem here

[sprajapat770]

still this issue not solved.