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

【问题标题】：Vue.js component img src from prop?来自prop的Vue.js组件img src？
【发布时间】：2019-02-06 21:49:45
【问题描述】：

我正在尝试执行以下操作，但图像输出不正确。我在 display.vue 中显示图像的地方，如果我打印 {{ someText }}，我会得到正确的文件路径 (../assets/city.png)。

显示.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>

【问题讨论】：

“输出不正确”是什么意思？图像是否显示？
@Stephen Thomas 它显示了默认的图像符号。
您是否确认该文件存在于指定位置？请记住，相对 url（就像您使用的那样）是相对于浏览器的当前 url 位置

标签： javascript vue.js vuejs2 bind

【解决方案1】：

你需要改变你的道具箱格式：

HTML 属性名称不区分大小写，因此浏览器会解释任何大写字符为小写。这意味着当您使用在 DOM 模板中，camelCased 的道具名称需要使用它们的 kebab-cases （连字符分隔）等价物 (source)

它应该这样工作：

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

【讨论】：

OP 没有使用 in-DOM 模板，所以骆驼大小写不是这里的问题。

【解决方案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 读取的

【讨论】：

也许我不知道。我所说的对我有用。 =)
好的））。在我的项目工作代码
我认为不同的 web pack 版本必须有不同的语法。无论如何，我们都可以说改变你提到的路径或我提到的应该解决这个问题。 =)