图像未在 Vue-bootstrap 中显示

Posted 2023-02-23

【中文标题】图像未在 Vue-bootstrap 中显示

【英文标题】：Image is not displaying in Vue-bootstrap

【发布时间】：2021-02-17 04:01:34

【问题描述】：

我不明白为什么这个img-src 在我的 vue 模板中不起作用。可能是我无法弄清楚的简单错误。

这里是，

<b-card img-src="../assets/image.jpg" img- img-top tag="article" style="max-width: 20rem;">

【问题讨论】：

看起来问题可能出在图像的相对路径上。这可能与您的资产的编译方式/您使用的构建系统有关。您能否添加更多关于您的环境以及您如何运行 Vue 的详细信息？

这能回答你的问题吗？ How do I include image in BootstrapVue carousel?

【参考方案1】：

这是将图像导入 vue 组件的一种方法：

脚本

import image from "@/assets/your_img.jpg";
export default 
  data() 
    return 
      image
    
  ,

模板

<b-card :img-src="image">

---

我认为它是因为 webpack 在图像路径上生成哈希，例如。 "/img/my_image.b1793a36.jpg"。我想这就是为什么你的第一种方法不起作用的原因。如果你导入图片，webpack 会自动添加一个 hash 并且路径会引用它。

【参考方案2】：

您是否在页面上看到损坏的图像图标？ -> 错误的图像相对路径

如果没有损坏的图像图标，请尝试设置一个 with/height 并将其从 b-card 组件中分离到组件中模板环境内的普通 img-tag