Problems Displaying a PNG image from heex template

Questions / Help
, , ,
1

I am trying to display a PNG image located at assets/images/logo.png
And bundled into priv/static/assets/images/logo.js, with this esbuild config:

--bundle --target=es2017 --outdir=../priv/static/assets --loader:.png=dataurl --external:/fonts/* --external:/images/*)

I added ‘–loader:.png=dataurl’ because esbuild said it didn’t know how to handle .PNG files, this then bundles the png into a .js file.

I think I might be going about this problem the wrong way.
My heex template:

    <a href="https://www.company.com/" class="phx-logo">
        <img src={Routes.static_path(@conn, "/images/logo.js")} alt="Company Logo" 
            style="width:80px;height:80px"/>
    </a>

How can I properly display this PNG image?

2

Why involve the bundler at all? You could just put the file in priv/static/images/logo.png and link to it.

3

I can do that and sure it works, but I would prefer to keep all of my assets in my top asset folder and then selecting which files in the asset folder to bundle into the main project, rather than just putting all of my images in the bundled assets folder. It’s a project structure annoyance.
Plus I .gitignore the priv/static/assets folder because my project bundles differently on different servers.

1 Like