[Vuejs]-How to import image file in vueJs template?

by

3👍

✅

You have to use require

<svg :src="require('®/@material-icons/svg/1k/outline.svg')"></svg>

Ensure to have the correct path for the file

Fore Vite

<svg :src="svgPath"></svg>

<script>
  async created(){
    this.svgPath = (await import("®/@material-icons/svg/1k/outline.svg")).default()
  }
  data(){
    return {svgPath:""}
  }
</script>
👤Kaneki21

1👍

The easiest way to work with images in Vitejs is to place images inside the public folder then use them without any import, Assume that we have a folder named svg inside the public one :

<svg src="/svg/1k/outline.svg"></svg>

Or import it as module then bind it to the src attribute :

<template>
  <svg :src="imgUrl"></svg>
</template>
<script setup>
   import imgUrl from '®/@material-icons/svg/1k/outline.svg'
</script>
👤Boussadjra Brahim

Leave a comment