How to import image file in vueJs template?-CodePudding

using Vite I need to import image url for example with the way like this

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

but instead of url I'm getting src="[object Promise]" is there any ways to make it work correctly?

CodePudding user response：

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>

CodePudding user response：

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>