來自prop的Vue.js組件img src？

Question

我正在嘗試執行以下操作，但圖像輸出不正確。 我在 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>

例子.vue

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

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

Answer 1

您需要更改道具案例格式：

HTML 屬性名稱不區分大小寫，因此瀏覽器會將任何大寫字符解釋為小寫。 這意味着當您使用 in-DOM 模板時，camelCased 道具名稱需要使用它們的 kebab-cased（連字符分隔）等價物（ 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的