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

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>

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,29729 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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related