vue assets image not load

Question

src/assets/profile.jpg

<v-img src="../assets/profile.png" aspect-ratio="2.75"></v-img>

not load

I do not work. What is the reason?

By the way,

If you specify img tag src, the image will be output.

The extension png is an error. It will not work even if you change it to jpg. — 타오르는선혈
– 타오르는선혈, Commented Jan 21, 2019 at 13:43
Try to use <v-img :src="require('@/assets/profile.jpg')" aspect-ratio="2.75" ></v-img> instead — Jns
– Jns, Commented Jan 21, 2019 at 13:49
Converted my comment to an answer with an explanation (as you asked for) — Jns
– Jns, Commented Jan 21, 2019 at 14:30

Jns · Accepted Answer · 2019-01-21 14:29:08Z

8

First you have to bind your image path to the src property and then you have to wrap the path in require('@/assets/profile.jpg') to let webpack know that this is a dependency.

So as mentioned as a comment, change your code to this: <v-img :src="require('@/assets/profile.jpg')" aspect-ratio="2.75" ></v-img>

answered Jan 21, 2019 at 14:29

Jns

3,2871 gold badge20 silver badges25 bronze badges

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

Comments

Araoz · Accepted Answer · 2019-03-01 19:31:19Z

5

This Work for me...

<template>
      <img :src=logo>
</template>

<script>
export default {
    data: () => ({
        logo: require('@/assets/profile.png')
    })
}
</script>

answered Mar 1, 2019 at 19:31

Araoz

1831 silver badge5 bronze badges

Collectives™ on Stack Overflow

vue assets image not load

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related