Question

我正在尝试执行以下操作，但是图像无法正确输出。在display.vue中显示图像的位置，如果打印{{someText}}，则会得到正确的文件路径（../ 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

您需要更改道具的情况格式：

HTML属性名称不区分大小写，因此浏览器将解释任何大写字符作为小写。这意味着当您使用在DOM模板中，骆驼的道具名称需要使用kebab大小写（以连字符分隔）（ source ）

它应该这样工作：

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

Answer 2

这种事情也发生在我身上。在您的 example.vue 中尝试

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

如果没有提供正确的输出。然后尝试完整路径

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

我的情况是图像未从../assets/city.png读取，但从src/assets/city.png读取

Vue.js组件img src来自prop？

2 个答案: