Polaris Image rendering problem

Retired Boards Appdev Store Design
1

With Chrome my code renders an image just fine using the Shopify suggested code for accessing images.

const images = require.context(‘../images’, true)
const imagePath = (name) => images(name, true)

<img src={ imagePath(‘./logo.png’) } className = “object-center object-contain h-48 w-full p-2” /> // render an image in DOM

If I examine the image address is comes across as:

/packs/media/images/logo-52b3521f113a0775455187c787456a3b.png

Any hey, that address renders the image just fine… so it is a correct URI to the image. Yet Safari refuses to render the image? Say what?

But Safari renders just an image placeholder? What? I am frustrated by this. Why is this a thing? The console has no errors from Safari, but it seems to choke on rendering images. What am I doing wrong here?

2

I changed my code to the following. Chrome and Firefox worked.

import Logo from “../images/logo.png”;

And in my React App component

So that worked fine.. but not in Safari? What gives with images and Safari. This is a Rails 6 project using Shopify App gem. Nothing crazy. All my images from Shopify render fine.

3

turns out it was a faulty image, and while Chrome and FF rendered it, Safari has internal guts that prevent it from rendering PNG files with slightly different characteristics. Moving on…