如何在 VueJS 中动态显示图像？

Question

组件之间的关系请看这里

下面的片段没有给出错误，也没有显示图像

<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

可能对你有用。让观察者再次更新道具值并在您的组件中重新渲染它。

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

};

Answer 2

别忘了补充。

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

Answer 3

您必须将图像公开给您的网络服务器。希望 Vue-cli 能为您做到这一点。您必须将资产文件夹从 src 移动到 public 文件夹。

的更多信息

How to dynamically display an image in VueJS?