javascript - 图像未在 Vue-bootstrap 中显示

Question

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

这里是，

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

score 1 · Accepted Answer

这是将图像导入 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 并且路径会引用它。

score 0 · Accepted Answer

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

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

2 回答 2