How to import image file in vueJs template?

Question

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?

Kaneki21 · Accepted Answer · 2022-09-19 03:16:13Z

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>

edited Sep 19, 2022 at 3:16

answered Sep 19, 2022 at 3:00

Kaneki21

1,4222 gold badges7 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

alexanne Over a year ago

but require is not working with Vite

Kaneki21 Over a year ago

Edited. Please try. I came across with this solution

alexanne Over a year ago

thank you, but seems vue render works synchronously and I cannot use await( I'm getting 'await' is only allowed within async functions and at the top levels of modules. and I don't know is there any ways to change templates render type to async

Kaneki21 Over a year ago

I've updated the answer, give it a try

Kaneki21 Over a year ago

You can make an utility function in a separate file, and pass the path as parameter and return the default value

|

Boussadjra Brahim · Accepted Answer · 2022-09-19 05:53:39Z

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>

answered Sep 19, 2022 at 5:53

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

1 Comment

alexanne Over a year ago

thanks but I'm using @material-icons/svg which are located in node_modules seems the only problem I have is I have 30+ svgs and that's pretty hard to remember name of every variable using import every time in script((

Collectives™ on Stack Overflow

How to import image file in vueJs template?

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related