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

Posted 2023-02-22

【中文标题】如何在 VueJS 中动态显示图像？

【英文标题】：How to dynamically display an image in VueJS?

【发布时间】：2020-05-08 16:21:21

【问题描述】：

请看这里组件之间的关系 How to pass value from one child component to another in VueJS?

sn-p 波纹管不报错也不显示图片

<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。我尝试渲染动态图像的方式似乎有问题。

【问题讨论】：

你的文件结构是什么样的？

感谢您的宝贵时间。我已经更新了我的帖子。代码结构可以看这里***.com/q/59855921/1745902

这能回答你的问题吗：***.com/a/40493036/3462319

它看起来像是在展示如何渲染多个图像，在我的例子中，我正在处理 ItemImage 组件中的一个 URL。也许我可以用那个答案作为提示。我会尝试。我是 VueJS 的新手。

那篇文章也是 2016 年的。我相信这些天可以以更好的方式做到这一点......

【参考方案1】：

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

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

【参考方案2】：

别忘了添加。

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

【讨论】：

作为旁注，图像 url 通常以正斜杠开头。 /assets/images/apple.jpg

谢谢。在 url 中添加 sn-p 和斜杠没有帮助

仔细检查图片是否存在于您的 assets/images 文件夹中。

图片在那里。当我尝试明确指定一个网址时，它起作用了。所以我尝试渲染的方式有问题

在开发工具中检查元素。 src中是否有图片的路径。

【参考方案3】：

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

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

;

【讨论】：

嗨。您能否添加更多说明如何添加它以及在哪里添加？