Polaris Image rendering problem

[HunkyBill]

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:

    <mydomain>/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?

[HunkyBill]

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

    import Logo from "../images/logo.png";

And in my React App component

    <img src={Logo} className="object-center object-contain h-48 w-full p-2"/>

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.

[HunkyBill · Accepted solution]

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...