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