How to use css images with vite?

@rollin 

To use CSS images with Vite, you can follow these steps:

1. Place your image files (e.g., .png, .jpg, .svg) in a directory within your project, such as 'src/assets/images'.
2. In your CSS file, use the following syntax to reference the image file:

1
2
3

.some-class {
  background-image: url('./assets/images/example.jpg');
}

1. When running Vite, it will automatically handle the image imports and serve them properly.
2. You can also directly import images in your JavaScript or TypeScript code using the import syntax, and Vite will handle it as well:

1
2
3
4
5

import exampleImage from './assets/images/example.jpg';

function App() {
  return <img src={exampleImage} alt="Example" />;
}

1. Make sure to configure Vite with the appropriate plugins if you need to optimize or transform your images during the build process. You can refer to Vite's official documentation for more information on how to configure plugins for image optimization.

By following these steps, you can easily use CSS images with Vite in your project.