来自prop的Vue.js组件img src？

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>

Answer 1

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>

Answer 2

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