Vuetify v-img doesn't load image with absolute path

Question

The problem is simple: I would like to display an image from an absolute path in vuetify with the v-img tag but it is not showing.

I have already tried doing it with :src="require('path/to/img')" but then an error comes saying "This dependency was not found"

<v-img src="src/assets/project_atv_logo.jpg"
            class="mb-4"
            contain
            height="128"
          ></v-img>

The file is stored under src/assets folder. I am using a mac pc if it matters.

Sarjerao Ghadage · Accepted Answer · 2019-09-09T10:19:53.157

2

try to use

<v-img :src="require('@/assets/project_atv_logo.jpg')"
            class="mb-4"
            contain
            height="128"
          ></v-img>

edited Sep 09 '19 at 10:19

answered Sep 09 '19 at 10:08

Sarjerao Ghadage

1

This dependency was not found: * @src/assets/project_atv_logo.jpg in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirector y":"node_modules/.cache/vue-loader","cacheIdentifier":"24ddd4d4-vue-loader-template"}!./node_ modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vuetify-l oader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-load er/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=template&id=469af010& To install it, you can run: npm install --save @src/assets/project_atv_logo.jpg – Andor Németh Sep 09 '19 at 10:14

score 0 · Answer 2 · answered Mar 06 '23 at 20:35

0

For the Vite environment, the solution is to use new URL('[path_to_image]', import.meta.url).href

See my answer here

answered Mar 06 '23 at 20:35

quilkin

score 0 · Answer 3 · answered Aug 13 '23 at 02:28

0

This worked for me:

<script setup lang="ts">
import logo from '@/assets/logos/banana.svg';
</script>

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

answered Aug 13 '23 at 02:28

3 Answers3