How can I reference images outside sourceCodeDir?

[adamreisnz]

Hello, I figured I'd open a new question as the old item is already marked as answered, so not getting a lot of traction.

Could someone please provide a concrete working example for how to get images working from the /app/assets/images folder when the sourceCodeDir is /app/javascript, in a Rails project?

I have tried a lot of different things, but can't seem to get it to work unless I move the images into the /app/javascript folder.

vite.json

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "additionalEntryPoints": [
      "assets/images/**/*"
    ]
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

Note: I have tried this with or without the additionalEntryPoints

Image tags

<%= vite_image_tag 'images/test.svg' %>

This is not working

Direct import

import testImage from 'images/test.svg'

This is not working, unless using a resolve alias

Any suggestions would be appreciated!

[ElMassimo]

move the images into the /app/javascript folder

That's the recommended approach.

can't seem to get it to work

It's an unusual configuration, but as mentioned in additionalEntrypoints and in the Advanced Usage section, if you needed to reference assets outside the sourceCodeDir, you need to disambiguate by starting with a leading slash:

<%= vite_image_tag '/assets/images/test.svg' %>

Otherwise, it will attempt to resolve to the entrypointsDir or the sourceCodeDir:

Regarding JS imports, read about Import Aliases and the example in watchAdditionalPaths.

[adamreisnz]

Regretfully, this just doesn't work. It makes no difference if I refer to the images with a leading slash or not. The images just aren't loaded by vite_image_tag unless they are placed in the /app/javascript folder.

I have read all the documentation multiple times, and tried everything I could think of. I'll just resort to moving all the images.

[ravensnowbird]

Quick fix that worked for me is dump all the images inside app/javascript/entrypoints folder and use the method vite_asset_path