Category Images not showing (svg)

[TechMistress]

Hello, for some reason the images for my categories are not showing. Images in products are fine.

The image beng rendered is:

Code: Select all

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3C/svg%3E" data-src="/images/phocacartcategories/thumbs/phoca_thumb_s_cat_floral.jpg" alt="Floral" class="img-responsive ph-image ">

The image is there and I can see it just by going to the thumb itself, so that's not the issue. I've tried looking at the page on windows and on ios devices and nothing shows there either, so that rules out my browser.

Any ideas?

Thanks!

[voymacao]

Did you try with regular jpg images instead of svgs, just to see if it works?
Never tried to use svgs in phoca, but you may wish to look at your thumbnail settings and make sure they match the svg viewBox size (0 0 300 200).

[TechMistress]

I did upload regular jpg images, but it renders like the code above. It only does this on category images, not on any of the products.

[Jan]

Hi, svg images are not supported, because of different features - like thumbnails, lazy loading, webp alternatives, etc.

[TechMistress]

PLEASE NOTE: I did NOT use svg images.
Phoca Cart rendered that code above all by itself.
I just added a category and uploaded a jpg image.

[TechMistress]

Alright, figured this out.

When I create a category and upload an image, Phoca renders it as an svg image, calling on the original image data - it breaks.

When I went back into the category and chose "select an image", choosing the one I uploaded earlier, the image appeared fine on the front end.

So, perhaps this is some sort of bug with the image upload for categories?
I didn't have an issue with products.
V 3.5.0

[Jan]

Hi, there is one feature in Phoca Cart - lazy loading of images, which uses the SVG tag for setting a placeholder (it is a common technique to display placeholder correctly in different browsers).

So maybe you mean this SVG when lazy loading of images are enabled? In such case it is possible that when image was missing and lazy loading was enabled, only the SVG placeholder was displayed.

Jan