Phoenix 1.6 rc cannot find static svg image

Phoenix Forum Chat / Discussions
, , ,
1

I started a project with Pheonix 1.6 rc. Everything is going great and the new esbuild pipeline is so fast and a joy to work with. I cannot find out how to display an hero image on home screen.

I added the file to assets/static/images/hero-image.svg here is my image tag
<img class="rounded-2xl" src="/images/hero-image.svg">

I have added the SVG loader to esbuild in config.exs

config :esbuild,
  version: "0.12.18",
  default: [
    args:
      ~w(js/app.js js/draft-editor.js js/book-long-description-html-editor.js js/chapter-render.js static/fonts/fonts.css --bundle --loader:.otf=file  --loader:.svg=file --target=es2016 --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

What am I doing wrong ? How do I get the image to be displayed on home screen ? Thanks

2

Are you importing that svg file in the javascript code or just using it in the src? If you’re not importing image in the code it won’t be build, but will just be a regular static file that needs to be copied separately to priv/static folder. With the new esbuild setup there is no longer automatic copying from assets/static to priv/static so you need to move them there for them to work.

6 Likes
3

Yes that was the issue, I put the image in priv/static/images and it worked like a charm. Thanks :smiley:

4

@aswinmohanme If you still want to keep using Esbuild because it’s fast but want a little less hustle to configure everything else (like the old default experience), try configuring Vite in your asset pipeline - compared to Webpack it’s a piece of cake, and you’ll get asset copying working as per usual.

1 Like