How to import assets in v-html with vite?

Member

by darion , in category: Javascript , a year ago

How to import assets in v-html with vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lottie , a year 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.

Related Threads:

How to use v-html on the vue.js?
How to import javascript file in vite?
How to import bootstrap into vite projects?
How to import libraries as plugins in a vite application?
How to import types from npm package using vite?
How to import an html file using webpack?