[SOLVED] How can I use v-img with SVG images?

How can I use v-img with SVG images?

I'm using Vuetify v-img tag, but it doesn't seem to accept SVG images.

<!-- does not work -->
<v-img src="../assets/logo.svg" width="40"></v-img>

So I tried the classic img tag and it works.

<img src="../assets/logo.svg" width="40" />

What am I doing wrong? Do I need some kind of specific configuration before being able to use SVG images with Vuetify?

Edit #1

Thanks to @umur insights I was able to make it work.

<script setup langs="ts">
import logo from '../assets/logo.svg'
</script>

<template>
  <v-img :src="logo"></v-img>
</template>

I don't really know why do I have to import it though.

Solution

Can you provide more details about the problem?

Which browser or browsers are you experiencing this problem on?
Have you tried setting the aspect-ratio property?
Have you tried setting a height?

You may try this:

<v-img :src="require('../assets/logo.svg')" :aspect-ratio="undefined"></v-img>

reference

Edit #1:

Why?

In the classic <img> tag, the browser resolves the relative path at runtime. But with <v-img>, which is a Vuetify component, Vue expects you to pass the image path in a way that the build tool can understand and handle, especially during the bundling process.

When you use require('../assets/logo.svg'), it's similar to importing the image, making sure the bundler processes the SVG correctly and resolves its path, ensuring that it's accessible in the final build.

So, importing or using require() ensures that the asset is properly bundled and available within your Vue component's context.