Vue Bootstrap img 未从资产文件夹中显示答案

【问题标题】：Vue Bootstrap img not displaying from assets folderVue Bootstrap img 未从资产文件夹中显示
【发布时间】：2019-02-01 06:22:03
【问题描述】：

我正在尝试显示本教程中所做的图像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 文件。

感谢您的帮助！

【问题讨论】：

标签： image css vue.js bootstrap-4

【解决方案1】：

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

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

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

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

【讨论】：

就像您上面列出的 Github 问题一样，它很可能与 Webpack 如何加载文件夹有关。如果您可以找到配置并查看一下，它可能会有所启发。（在 Vue 3 cli 中，这不太可能）。