image - Vue Bootstrap img 不从 Assets 文件夹中显示

Question

我正在尝试显示像本教程中所做的那样的图像 https://bootstrap-vue.js.org/docs/components/image/

这是我的代码

<template>
 <b-container fluid class="p-4 bg-dark">
 <b-row>
 <b-col>
  <b-img rounded="circle" thumbnail fluid src="require('../assets/sweetcart.jpg')" alt="Thumbnail" />
</b-col>
<b-col>
  <b-img rounded="circle" thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Thumbnail" />
</b-col>
<b-col>
  <b-img rounded="circle" thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Thumbnail" />
</b-col>
</b-row>
</b-container>
</template>

这是我的文件结构，虽然我确定图像的文件路径是正确的，因为我已经能够在其自己的 div 标记中显示图像，但问题似乎与 Bootstrap 有关？

我在 Home.vue 文件中工作。

感谢您的帮助!

Answer 1

我设法通过将图像放在静态文件夹而不是 Assets 文件夹中来解决这个问题。

我仍然很好奇为什么这在 Assets 文件夹中不起作用？

这些人正在讨论类似的事情，但似乎没有明确的答案。

https://github.com/vuejs/Discussion/issues/202