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:

please check the attached screenshot:

enter image description here

2 Answers 2


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": [

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.

  • I have followed steps and apply but this solution is not working for me. Commented Feb 19, 2020 at 8:34
  • what is your API URL? like localhost:8080 localhost:8080/img/310/300/resize/i/m/img-11.png Here path i/m/img-11.png is Magento path for image Commented Feb 19, 2020 at 9:02
  • Please check the attached screenshot Commented Feb 19, 2020 at 9:14
  • Please check the updated answer above & accept if it works for you. Thanks Commented Feb 19, 2020 at 9:27

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


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


"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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.