Vue Bootstrap img不在资产文件夹中显示

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标签中显示该图像，但是问题似乎与引导程序有关？

我正在处理Home.vue文件。

感谢您的帮助！

Answer 1

我设法通过将图像放置在静态文件夹而不是资产文件夹中来解决此问题。

我仍然对为什么在资产文件夹中不起作用感到好奇？

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

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