Polaris Image rendering problem

Solved
HunkyBill
Shopify Expert
4764 54 550

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?

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Accepted Solution (1)

Accepted Solutions
HunkyBill
Shopify Expert
4764 54 550

This is an 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...

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com

View solution in original post

Replies 2 (2)
HunkyBill
Shopify Expert
4764 54 550

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.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
HunkyBill
Shopify Expert
4764 54 550

This is an 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...

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com