javascript - 如何在 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

可能对你有用。为它创建一个观察者以再次更新道具值并在您的组件中重新呈现它。

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>