Load Assets' Images

[ayadcodes]

Thanks for this really helpful library.

Is there a possibility to load the static images that are inside the static folder ? Like Django's {% static %}.

For example:
When I visit an image using {% static %} it shows 404 error.

But when I change the port to 3000 it shows that django-vite imported it.

[MrBin99]

Thanks !

It's possible, you need to import them into you main.js file like CSS. But be aware that, last time I tested this, Vite put URLs of those static files a bit messy in the manifest.json to be load with Python safely.
For now, static files (like images, fonts ...) are not supported by django-vite. You should use the {% static %} of Django.

I keep your issue open, and if other peoples are demanding of this feature I will give it a look, or if you want to do a PR and implement it, you're welcome.

[Sergdan1992]

It would be great if the django-vite supported images. Or any expample how handle images in development and build state

[aresti]

I got stuck with this for a little while. Just a note for anyone looking to import images and use them elsewhere within their javascript frontend:

As per Vite docs https://vitejs.dev/guide/assets.html you can just:

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

They won't work with django-vite in dev mode right away, because it'll be hitting the django dev server using a relative path, rather than your vite dev server.

To fix, just add the following option to your vite config:

  server: {
    origin: "http://localhost:5173",
  }

That way, you'll get absolute generated asset URLs during development
docs ref: https://vitejs.dev/config/server-options.html#server-origin

[emab]

Another way of achieving this is to use a copy plugin (such as https://www.npmjs.com/package/rollup-plugin-copy) to copy any assets you need in Django during your Vite build process - then when Django grabs your dist output folder you can just use static to reference your assets.

This is useful if the assets themselves aren't bundled by Vite.

[pySilver]

@aresti this should be documented :) faced the same issue

[azabraao]

End of 2024 and still @aresti answer isn't documented. Please @MrBin99, this info will be useful to all.

[pdina]

or if you want to do a PR and implement it, you're welcome.

@azabraao
we all rely on community contributions to improve the project. thanks for your comment and looking forward to your PR. Or am I miss something?

[MrBin99]

Hi, I'm sorry for the disappointment.

I initially created django-vite because I needed it for my personal projects and I was thinking that maybe other peoples will be happy to have it too.
Today I still use it all of my Django projects, but unfortunately I don't have time to document all possibilities to use it as everyone configure their project with Vite differently (and Vite is very powerful and versatile) for different needs and its very hard to keep up.
This is for this purpose that I'm not the only one administrator on this project but I don't want neither to make everyone admin and have documentation or specific cases done for everyone as this should be counter productive in my opinion. I think PRs are there for it and I try to merge them when I think the problem solved is a problem that the majority of people have and not to solve a very specific problem because of a specific configuration that maybe one person has.

I see that this problem occurs very often so please make a PR that I will be happy to merge as you will explain, document and give answers to the problem better than me.

✌️