Can't synchronize a product's image

Question

Can't synchronize a product's image

zadigus opened this issue 6 years ago · comments

Hi,
I was finally able to install the whole vue-storefront application as described here: https://medium.com/@piotrkarwatka/vue-storefront-how-to-install-and-integrate-with-magento2-227767dd65b2. This means that I was able to have vue-storefront, vue-storefront-api, and magento2 working. I am having a little trouble with mage2vuestorefront. I did the following:

remove all the products from Magento (browse local.magento/admin, go to Catalog->Products and empty the list)
synchronize magento with vuestorefront: I decided to rebuild with

cd vue-storefront-api
npm run db rebuild -- --indexName=vue_storefront_catalog

After those two steps, I was able to see an empty shop in vue-storefront. Then I did:

add one product to Magento (in a category that already exists) with a picture
synchronize magento with vuestorefront:

node --harmony cli.js productsdelta --partitions=1

After those two steps, I was able to see the new item in vuestorefront, but its picture wasn't loaded. What am I missing? What I suspect is that the link to the image is probably synchronized, but the image itself is not made available from vue-storefront-api. How can I make it happen?

Piotr Karwatka · Answer 1 · Sat Aug 25 2018 17:32:29 GMT+0800 (China Standard Time)

Hi, good to hear that :) You're almost there. Please take care of the vue-storefront-api config/local.json -> magento2 section imgUrl + imageable section.

It works like vue-storefront-api is a image proxy. So imgUrl should point directly to Your Magento instance

Laurent Michel · Answer 2 · Sun Aug 26 2018 15:05:14 GMT+0800 (China Standard Time)

@pkarw I configured vue-storefront-api/config/local.json in the following way:

"magento2": {
    "url": "http://local.magento",
    "imgUrl": "http://localhost:8080/media/catalog/product",
    "assetPath": "/../var/magento2-sample-data/pub/media",
    "magentoUserName": "",
    "magentoUserPassword": "",
    "httpUserName": "",
    "httpUserPassword": "",
    "api": {
      "url": "http://local.magento/rest",
      "consumerKey": "2uqsdrt61n6v5l0d90gmssjx7oyj229v",
      "consumerSecret": "aderivm5s4yprgvji94233gw2sc73j1u",
      "accessToken": "n5p7s6vli4ise05xplo44en5llyidex3",
      "accessTokenSecret": "60v6yivu7ew6l018b4cdf3tv3s89dh0u"
    }
  },
  "imageable": {
    "namespace": "",
    "maxListeners": 512,
    "imageSizeLimit": 1024,
    "timeouts": {
      "convert": 5000,
      "identify": 100,
      "download": 1000
    },
    "whitelist": {
      "allowedHosts": [
        ".*divante.pl",
        ".*vuestorefront.io",
        "localhost"
      ],
      "trustedHosts": [
        ".*divante.pl",
        ".*vuestorefront.io",
        "localhost"
      ]
    },
    "keepDownloads": true,
    "maxDownloadCacheSize": 1000,
    "tmpPathRoot": "/tmp",
    "debug": false
  }

I made sure that the url to magento and the api keys are correct. Now, upon call to

node --harmony cli.js productsdelta --partitions=1

after I added a new product to Magento, I get the following output from vue-storefront-api:

POST /api/catalog/vue_storefront_catalog/product/_search?size=50&from=0&sort=updated_at%3Adesc&_source_exclude=configurable_children%2Cdescription%2Cconfigurable_options%2Csgn&_source_include=type_id%2Csku%2Cproduct_links%2Ctax_class_id%2Cspecial_price%2Cspecial_to_date%2Cspecial_from_date%2Cname%2Cprice%2CpriceInclTax%2CoriginalPriceInclTax%2CoriginalPrice%2CspecialPriceInclTax%2Cid%2Cimage%2Csale%2Cnew%2Curl_key%2Cstatus 200 33.962 ms - 1613
OPTIONS /api/cart/pull?token=&cartId=8a2232b20826c8ff833c097960f40a8a 204 0.088 ms - 0
debug: Calling API endpoint: GET http://local.magento/rest/V1/guest-carts/8a2232b20826c8ff833c097960f40a8a/items/ token: 
info:  url=http://local.magento/rest/V1/guest-carts/8a2232b20826c8ff833c097960f40a8a/items/, method=GET, Authorization=OAuth oauth_consumer_key="2uqsdrt61n6v5l0d90gmssjx7oyj229v", oauth_nonce="kYA8a81gdhuiAexxJrutRNsehdmwADJM", oauth_signature="9jGoq4qMLHgAS4GUFKrj8oOr8sM%3D", oauth_signature_method="HMAC-SHA1", oauth_timestamp="1535266657", oauth_token="n5p7s6vli4ise05xplo44en5llyidex3", oauth_version="1.0", json=true, body=undefined
http://localhost:8080/media/catalog/product/c/l/cloud-bag-schwarz-001.xl3_1.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocalhost%3A8080%2Fmedia%2Fcatalog%2Fproduct%2Fc%2Fl%2Fcloud-bag-schwarz-001.xl3_1.jpg&size=310x300
GET /media/catalog/product/c/l/cloud-bag-schwarz-001.xl3_1.jpg 404 3.951 ms - 196
GET /resize?url=http%3A%2F%2Flocalhost%3A8080%2Fmedia%2Fcatalog%2Fproduct%2Fc%2Fl%2Fcloud-bag-schwarz-001.xl3_1.jpg&size=310x300 304 55.466 ms - -

As a result, the new product appears in vue-storefront but still without picture. This is for sure linked to the 404 error reported here above. There is still something wrong with my config. Do you know what? For instance, the following parameters are left blank:

"magentoUserName": "",
"magentoUserPassword": "",
"httpUserName": "",
"httpUserPassword": "",

Is that a problem?

Piotr Karwatka · Answer 3 · Sun Aug 26 2018 15:11:35 GMT+0800 (China Standard Time)

Hi,

I belive that the imgUrl set to
http://localhost:8080/media/catalog/product/

Is incorrect. You should rather try http://local.magento/media/catalog/product

Laurent Michel · Answer 4 · Sun Aug 26 2018 15:38:41 GMT+0800 (China Standard Time)

I see no more errors on the vue-storefront-api side. I still don't see the picture in vue-storefront though. The app seems to take a long time to just load that one image (in dev mode). I think it is working, because I don't see the cross on the image's top-left corner in vue-storefront which probably means that the image exists and is loading.

Laurent Michel · Answer 5 · Sun Aug 26 2018 16:45:04 GMT+0800 (China Standard Time)

I did some more extensive testing and it is still not working. I started from a Magento database with empty products but with the categories defined by the script install-sampledata. At this point, both Magento and Vuestorefront have consistent data.

Then, I add a product to Magento in the Default category. That product has a picture. I save the new product and do the following:

export TIME_TO_EXIT=2000

cd ~/workspace/mage2vuestorefront/src
node ./cli.js taxrule --removeNonExistient=true
node ./cli.js attributes --removeNonExistient=true
node ./cli.js categories --removeNonExistient=true
node ./cli.js productcategories --removeNonExistient=true
node ./cli.js products --removeNonExistient=true

cd ~/workspace/vue-storefront-api
npm run db rebuild -- --indexName=vue_storefront_catalog

Then I refresh vue-storefront. The new product doesn't appear. Then I empty the browser's (firefox) offline website data, cookies, and Cookies and refresh vue-storefront. Then the new product appears, but it doesn't have the picture (it is represented by the placeholder). You have a look at the following logs:
Logs of the first data import with mage2vuestorefront
VueStorefront logs
VueStorefrontAPI logs

Laurent Michel · Answer 6 · Sun Aug 26 2018 19:46:57 GMT+0800 (China Standard Time)

I double-checked my vue-storefront-api/config/local.json config and I set the whiteList like this:

"whitelist": {
      "allowedHosts": [
        ".*divante.pl",
        ".*vuestorefront.io",
        "localhost",
	"local.magento"
      ],
      "trustedHosts": [
        ".*divante.pl",
        ".*vuestorefront.io",
        "localhost",
	"local.magento"
      ]
    },

I also had a look into the api's log and found things like this (after a fresh import of the magento products into vue-storefront after I applied the install-sampledata to the magento docker container):

http://local.magento/media/catalog/product/w/s/ws03-blue_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws03-blue_main.jpg&size=310x300
GET /resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws09-blue_main.jpg&size=310x300 500 1010.943 ms - 21
GET /resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws07-black_main.jpg&size=310x300 500 1022.265 ms - 21
GET /resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws10-green_main.jpg&size=310x300 500 1033.631 ms - 21
http://local.magento/media/catalog/product/w/s/ws10-green_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws10-green_main.jpg&size=310x300
GET /resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws11-green_main.jpg&size=310x300 500 1014.365 ms - 21
GET /resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws04-blue_main.jpg&size=310x300 200 1023.421 ms - 3121
GET /resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws03-blue_main.jpg&size=310x300 500 1016.364 ms - 21
http://local.magento/media/catalog/product/w/s/ws11-green_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws11-green_main.jpg&size=310x300
http://local.magento/media/catalog/product/w/s/ws03-blue_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws03-blue_main.jpg&size=310x300
http://local.magento/media/catalog/product/w/s/ws06-gray_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fs%2Fws06-gray_main.jpg&size=310x300
http://local.magento/media/catalog/product/w/j/wj12-black_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fj%2Fwj12-black_main.jpg&size=310x300
http://local.magento/media/catalog/product/w/j/wj06-blue_main.jpg / resize/310/300
/resize?url=http%3A%2F%2Flocal.magento%2Fmedia%2Fcatalog%2Fproduct%2Fw%2Fj%2Fwj06-blue_main.jpg&size=310x300

Laurent Michel · Answer 7 · Sun Aug 26 2018 19:57:50 GMT+0800 (China Standard Time)

Also, if browse the following address (the image's filename is one of magento's sample data)

http://localhost:8080/img/310/300/resize/ws10-green_main.jpg

then I get an invalid image (blank with cross on the top-left).

Laurent Michel · Answer 8 · Sun Aug 26 2018 20:34:19 GMT+0800 (China Standard Time)

@pkarw I FOUND IT!!!!!!!!!!!!
your indication
http://local.magento/media/catalog/product
was only partially true. It must be
http://local.magento/pub/media/catalog/product

Anirudh Gurumurthi · Answer 9 · Tue Aug 28 2018 15:17:05 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?

Ahmet Süver · Answer 10 · Mon Jun 28 2021 21:40:42 GMT+0800 (China Standard Time)

@anirudh3333

I'm struggling with the same problem. Want to remove the "700/500/resize" part.

Do you have any solution? How did you fix the problem?