Images entrypoint

[AlesLulak]

Hi,

I would like to have directory structure as shown on https://vite-ruby.netlify.app/guide/development.html#entrypoints-%E2%A4%B5%EF%B8%8F

But when I use vite_asset_path it looks into entrypoints directory and thus I need to have images/ under entrypoints/.

How can I use images outside of entrypoints directory? I tried to create symlink from app/frontend/images to app/frontend/entrypoints/images as a workaround but Zeitwek had problems with that.

[ElMassimo]

Edit: The following is outdated, see #108 (comment) instead.

---

Hi Aleš,

Any asset that will be referenced using tag helpers such as vite_asset_path must be under the entrypoints directory.

This is only necessary when images are referenced directly in server-rendered HTML.

Otherwise images can be placed in any directory when:

• imported from JS: import src from '~/images/example.jpg'
• referenced in CSS: background-image: url('~/images/bg.jpg')

[AlesLulak]

Thank you for clarification.

So I got it working with the symlink in the end.

I created a directory images under entrypoints and symlink in frontend, like this:
$ ln -s $(pwd)/app/frontend/entrypoints/images ./app/frontend/images

So now I have two images directory which cause the problem with Zeitwerk const_get': uninitialized constant Images (NameError)

To avoid this error, I had to tell to ignore the symlink in application.rb (or in production.rb)

Rails.autoloaders.main.ignore(Rails.root.join('app/frontend/images'))

And now production works fine.

EDIT:
It's actually better to ignore the entire frontend directory Rails.autoloaders.main.ignore(Rails.root.join('app/frontend')) or rename frontend to assets as it's gets ignored by default (and change sourceCodeDir in config/vite.json).

[ElMassimo]

Thanks for sharing! Should be useful for anyone that needs this directory structure.

Ignoring the sourceCodeDir directory in Rails autoloader makes a lot of sense—I might add it to the vite_rails gem by default, since there shouldn't be any Ruby files inside it.

[ElMassimo]

@AlesLulak Released [email protected], which will set app.config.javascript_path accordingly so that the directory is ignored by default.

Please upgrade and remove the manual Rails.autoloaders.main.ignore, and let me know how it goes 😃

[AlesLulak]

@ElMassimo config.javascript_path sounds better than ignore indeed! For some reason the change you made doesn't work for me, but when I set javascript_path manualy in application.rb or production.rb the same way you did in initializer it works. Dunno why tho, might be something on my side, I will get back to it later this day.

[AlesLulak]

Note: this also seems to work ok

initializer 'vite_rails.set_source' do |app|
  source_dir = ViteRuby.config.root.join(ViteRuby.config.source_code_dir)
  Rails.autoloaders.main.ignore(source_dir)
end

[ElMassimo]

@AlesLulak In 3.0.0 it's now possible to reference files outside the entrypoints dir.

vite_asset_path 'images/logo.svg' now works out of the box in the example structure.

[Matt-Yorkley]

Hey @ElMassimo, do you think it's worth adding an extra tag helper for something like vite_image_tag in vite_rails? I've just been trying out switching from Webpacker to Vite and one thing I had to replace a lot was things like:

-- image_pack_path("example.jpg", class: "example")`
++ image_tag(vite_asset_path("images/example.jpg"), class: "example")`

It's a really minor thing, but it might make a few people's lives a bit easier when upgrading/switching 🤷‍♂️

PS: vite_rails is awesome, thanks for all your hard work ❤️

[ElMassimo]

Hi Matt, I think it makes sense to add a helper example in the Migration section, which users can add:

def vite_image_tag(path, **options)
  image_tag(vite_asset_path(path), **options)
end

Adding it to the core would be an invitation for users to request srcset helpers as well, which can already be implemented using a combination of vite_asset_path and Rails helpers.

I don't feel strongly about the simple vite_image_tag case though, just mentioning where I draw the line in terms of scope.

[Matt-Yorkley]

srcset

Fair. The srcset is a bit annoying. For reference, image_pack_tag handles it like this:

def image_pack_tag(name, **options)
    if options[:srcset] && !options[:srcset].is_a?(String)
      options[:srcset] = options[:srcset].map do |src_name, size|
        "#{resolve_path_to_image(src_name)} #{size}"
      end.join(", ")
    end

    image_tag(resolve_path_to_image(name), options)
end

[ElMassimo]

Seems like a reasonable addition if resolve_path_to_image is replaced with a vite_asset_path call.

Feel free to open a pull request if you are interested in adding vite_image_tag, including the srcset behavior.

---

I'm not interested in adding vite_preload_tag nor vite_favicon_tag, seems overkill and the few users that need it can add them on their own.

[Matt-Yorkley]

Draft PR here: #163

Let me know if it needs anything else 👌

I'll just take a quick look and see if there's some docs updates I could add...

[ElMassimo]

@Matt-Yorkley Thanks for your contribution, vite_image_tag is now available in [email protected].

[Bandes]

Hi @ElMassimo I am using [email protected] and I cannot for the life of me get vite_image_tag to find images outside of my entrypoints folder - I have specified the folder in additionalEntrypoints in vite.json and the assets appear in my manifest-assets.json file, but vite doesn't seem able to find them. Can you offer any advice?

[adamreisnz]

Did you ever find out what the problem was?

[adamreisnz]

@ElMassimo , could you 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 app?

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
  }
}

(have tried with or without additionalEntryPoints)

Image tags

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

(not working)

Direct import

import testImage from 'images/test.svg'

(not working, unless using a resolve alias)

Any suggestions would be appreciated!