Product Images magento not displaying

Hi,

I am trying to get my product images to load.

My vue-storefront config local.json

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

My vue-storefront-api local.json configration :
“magento2”: {
“url”: “http://shopdev.sunny.be
“imgUrl”: “http://shopdev.sunny.be/pub/media/catalog/product”,
“assetPath”: “/…/var/magento2-sample-data/pub/media”,
“api”: {
“url”: “http://shopdev.sunny.be/rest”,

“imageable”: {
“maxListeners”: 512,
“imageSizeLimit”: 1024,
“whitelist”: {
“allowedHosts”: [
“.*divante.pl”,
“.*vuestorefront.io”,
demo.vuestorefront.io”,
“.*localhost”,
“.*shopdev.sunny.be”,
“shopdev.sunny.be”,
“localhost”
],
“trustedHosts”: [
“.*divante.pl”,
“.*vuestorefront.io”,
demo.vuestorefront.io”,
“.*localhost”,
“.*shopdev.sunny.be”,
“shopdev.sunny.be”,
“localhost”
]
},

Still I get a bad request

Can someone please help what am I doing wrong ? I can see all products but no images.

Thanks

In the storefront config (not the api) the images config baseUrl seems to be the address that the client should attempt the request against. So if it’s running on your domain (shopdev.sunny.be) with that configuration, the browser will actually be requesting the images from the user’s localhost.

Change the baseUrl to the actual path of the server image endpoint and it should work.

But I am running it against localhost, and the elasticsearch is also running on localhost. I have changed the baseUrl to

“baseUrl”: “http://shopdev.sunny.be/img/”,

But still not working.

Hi,

I don’t know why the image path is http:localhost:8080/img/600/744/resize/0/1/01881.jpg.
According to your config of VSF, the image path should be http:localhost:8080/img/600/744/resize/catalog/product/0/1/01881.jpg. I’m not sure what you’ve changed.you can see VSF\core\mixins\thumbnail.js, this is how to rewrite the path of the image.

http:localhost:8080/img/600/744/resize/0/1/01881.jpg is equivalent to config of magento2.imgUrl (VSF-API) + /0/1/01881.jpg, (I think you should change magento2.imgUrl to “http://shopdev.sunny.be/pub/media”。)

And you can open the link to the image directly in the browser, If it makes an error, he’ll return the link in the magento, and you can check that the link is correct

Thanks for all the good advice already.

But I am still facing problems like also mentioned in this :: https://github.com/DivanteLtd/mage2vuestorefront/issues/29

If I set this url
vue-storefront (although I think this should refer to the vue-storefront-api "localhost:8080/img)

    "useExactUrlsNoProxy": false,
    "baseUrl": "http://shopdev.sunny.be/pub/media/catalog/product/",

vue-storefront-api

    "imgUrl": "http://shopdev.sunny.be/pub/media/catalog/product/",
    "mediaUrl":"http://shopdev.sunny.be/pub/media",

But now I get the folowing problem that the resize funtion is enabled

http://shopdev.sunny.be/pub/media/catalog/product/600/744/resize/0/1/01881.jpg

correct url should be, then I am able to see the picture

http://shopdev.sunny.be/pub/media/catalog/product/0/1/01881.jpg

Can you advise me what to do next ?

Thanks

Solved it by your tips thanks