Images in /public folder in Rails app?

[themire]

I am attempting to migrate my Rails 7 + Vue app from Webpacker to Vite which is looking like a great option so far!

I often direcly reference images from the /public/ folder in the Rails app in my templates. <img src="/images/photo.jpg">

This is working fine in development but when I try to build Vite for production I'm getting

[vite]: Rollup failed to resolve import "/images/photo.jpg"`

Is there anything I need to add to Vite config to get this to work?

Should I move all of these images into app/assets or somewhere and let Vite manage them? What's the best practice?

[ElMassimo]

Hi Julian!

I think you are running into Vue's Asset URL Handling.

As a result, it's extracting the src as an import, which Rollup can't find in that path, triggering that error.

---

Note that only attribute values that are static strings are transformed

If you want to keep those images in public, making the src dynamic should prevent Vue from extracting it as an ESM import:

<img :src="`/images/photo.jpg`">

---

Otherwise, moving those images into <sourceCodeDir>/images and using a path such as @/images/photo.jpg should work, with Vue extracting that to import imageSrc from '@/images/photo.jpg' and Rollup fingerprinting that asset as for any URL import.

[themire]

You are a legend Massimo! ❤️

Unrelated question: How do you see what sourceCodeDir and the others are defined as?

[ElMassimo]

sourceCodeDir is whatever you have configured.

When in doubt, run the console and check:

ViteRuby.config