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

Question

请在此处查看组件之间的关系 How to pass value from one child component to another in 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

您必须将图像公开到Web服务器。希望Vue-cli为您做到这一点。您必须将资产文件夹从src移到公用文件夹。

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

Answer 2

可能对您有用。对此进行观察，以再次更新props值，然后将其重新呈现在组件中。

BluetoothLESCanner.startScan(...)

Answer 3

别忘了添加。

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