How to import assets in v-html with vite?

Member

by darion , in category: Javascript , 8 months ago

How to import assets in v-html with vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lottie , 8 months ago

@darion 

To import assets in v-html with Vite, follow these steps:

  1. Place your assets (images, videos, etc.) in the public directory of your project.
  2. In your component where you want to use the assets in the v-html directive, you can use the tag for images or the
  3. When providing the source attribute to the asset, use the import.meta.glob function to dynamically import the asset path. For example, for an image in your public directory:
1
<img :src="import.meta.glob('/assets/image.png').default" alt="Image">


  1. Vite will replace the import.meta.glob function with the correct asset path during build time, allowing you to import assets dynamically in the v-html directive.