如何在VueJS中動態顯示圖像？

Question

請看這里組件之間的關系如何在VueJS中將值從一個子組件傳遞到另一個子組件？

下面的代碼段沒有給出錯誤，也沒有顯示圖像

<img v-bind:src="image_url" /> 

代碼：

<template>
  <div>
    <img v-bind:src="image_url" />
  </div>
</template>

<script>
export default {
  props: ["image_url"]
};
</script>

image_url來自另一個組件，在 VueJS 開發人員的工具中，我能夠確認該值是一個 url。 看起來我嘗試渲染動態圖像的方式有問題。

Answer 1

您必須將圖像公開到您的網絡服務器。 希望 Vue-cli 為您做到這一點。 您必須將資產文件夾從 src 移動到公共文件夾。

有關https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling 的更多信息

Answer 2

可能對你有用。 為它創建一個觀察者以再次更新 props 值並在您的組件中重新渲染它。

export default {
  props: ["image_url"],
  watch: {
          image_url(val){
              this.image_url = val
          },
    }

};

Answer 3

不要忘記添加。

<div v-if="image_url">
  <img v-bind:src="image_url" />
</div>