Images with vite

[Akelpha]

I have a problem with Boostrap since I have started to use it as a CSS framework, especially when I use it with vite.
This problem is really weird: when I'm using boostrap via link, it's not like this!
so let me explain you, in short : I can't see my images and I don't know why ! i have trying to check many times to see if i did a mistake with my folder's structure but it's not this and i check on google , i saw something like my images type are not images/png or images/jpg anymore but text/html but when im not using vite i can see images very well.

[julien-deramond]

It sounds like the issue might be related to how Vite processes and serves assets compared to using Bootstrap via a link. When using Vite, the way static assets like images are handled might differ, and it's possible that Vite's dev server is either not serving the images correctly or they're being incorrectly referenced. Bootstrap itself won't affect image visibility by default, nor does it alter how images should be displayed. The issue seems to be more about how Vite handles your asset paths and MIME types.

[AhmedAlshair]

As Julien mentioned, the issue is more likely related to your paths config for Vite. I encountered similar issues before and the core problem was in the configuration of the base url in the vite.config file, its relation to your assets location and how you import them in your components.

In addition, Vite does not resolve CSS paths by default. You might need to set up a custom resolve that might look like the following:

import path from 'path';

export default defineConfig({
//  ... the rest of your configuration
resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

In CSS, paths would look like the following:

background: url(@/assets/icons/icon-time.svg) no-repeat;

So:

• Check the base value in Vite config
• Use path aliases and absolute path imports when possible
• Update path resolve in Vite configuration

[Akelpha]

Thanks a lot! I've just found this solution; I just didn't put the public file in the src file, all of this because of that.