Vue.js component img src from prop?

Question

I'm trying to do the following, but the image doesn't output correctly. Where I display the image in display.vue, if I print {{ someText }}, I get the correct file path (../assets/city.png).

display.vue

<template>
    <example :someText="'../assets/' + stamp + '.png'"></example>
</template>

<script>
import example from './example.vue'

export default {
    name: "",
    data() {
        return {
            stamp: "city"
        }
    }
    components: [
        example
    ]
};
</script>

example.vue

<template>
    <img :src="someText" />
</template>

<script>
    export default {
      name: "example",
      props: ["someText"]
    };
</script>

What do you mean by "doesn't output correctly"? Is the image showing at all? — Stephen Thomas
– Stephen Thomas, Commented Aug 31, 2018 at 21:16
Have you verified that the file exists in the specified location? rememet that relative urls (like the one you use) are relative to the current url location of the browser — Chinonso Chukwuogor
– Chinonso Chukwuogor, Commented Aug 31, 2018 at 23:15

tony19 · Accepted Answer · 2022-07-15 22:12:30Z

3

You need to change your props case format:

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents (source)

It should work this way:

<template>
  <example :some-text="'../assets/' + stamp + '.png'"></example>
</template>

edited Jul 15, 2022 at 22:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 31, 2018 at 22:44

Sovalina

5,6094 gold badges25 silver badges41 bronze badges

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

1 Comment

yuriy636 Over a year ago

OP isn't using in-DOM templates, so camelCase isn't the issue here.

margherita pizza · Accepted Answer · 2018-09-01 01:53:20Z

0

This kind of thing happened to me also. In your example.vue try this

<template>
    <img src="../assets/city.png" />
</template>

If this not gives you the correct output. Then try with the full path

<template>
    <img src="src/assets/city.png" />
</template>

My case was image doesn't read from ../assets/city.png but it reads from src/assets/city.png

answered Sep 1, 2018 at 1:53

margherita pizza

7,28729 gold badges105 silver badges181 bronze badges

3 Comments

margherita pizza Over a year ago

Maybe I don't know. What I said is what worked for me. =)

Николай Over a year ago

Ok)). In my project work code <img src="@/assets/logo.png" />

margherita pizza Over a year ago

I think different web pack versions has to have different syntax. Anyways we both can say changing the path as you mentioned or as I mentioned should solve this question. =)

Collectives™ on Stack Overflow

Vue.js component img src from prop?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related