Magento 2 Vue Storefront How to get product images?

Question

I have implemented the vue storefront successfully. But in category and product, the detail page product image is not appearing. Can you please tell me how to render the product images?

I have selected the custom URL for image endpoint:

http://127.0.0.1/mage/pub/media/catalog/product

please check the attached screenshot:

Answer 1

Vuestorefront uses the ImageMagick library to resize the image so make sure you have installed that your system, You can use this for installation.

You need to update the imgUrl and mediaUrl in vuestorefront-api/config/local.json like below.

"magento2": {
    "imgUrl": "http://localhost/my_magento/pub/media/catalog/product",
    "mediaUrl": "http://localhost/my_magento/pub/media",

Update the imageable as per below, you need to add your hosts in it.

"imageable": {
    "namespace": "",
    "maxListeners": 512,
    "imageSizeLimit": 1024,
    "whitelist": {
    "allowedHosts": [
        ".*localhost",
        ".*127.0.0.1"
    ],
    "trustedHosts":[
        ".*localhost",
        ".*127.0.0.1"
    ]
}

Update the following in vue-storefront/config/local.json

"images": {
    "useExactUrlsNoProxy": false,
    "baseUrl": "http://localhost:8080/img/",
    "productPlaceholder": "/assets/placeholder.jpg"
}

After you have updated your changes in vuestorefront-api/config/local.json you need to again run yarn dev from the terminal for vuestorefront and vuestorefront-api.

Answer 2

i have found a simple solution you can try that

copy all your magento 2 pub/media data in vue-storefront-api/var/magento-folder/pub/media Or create a symlink if you are working on localhost

vue-storefront-api/config/local.json

"magento2": { "imgUrl": "http://magento-domain/pub/media/catalog/product",
"assetPath": "/../var/magento-folder/pub/media", }

vue-storefront/config/local.json

"images": {
     "useExactUrlsNoProxy": false,
     "baseUrl": "http://localhost:8080/img/",
     "useSpecificImagePaths": false,
     "paths": {
       "product": "/catalog/product"
     },
     "productPlaceholder": "/assets/placeholder.jpg"
   },

run command in vue-storefront and vue-storefront-api

yarn dev