Nuxt.js + vuetify 图像未加载

Question

我正在使用 Nuxt.js + Vuetify，但图像无法加载到我的下一页文件中。例如，在我的 中./pages/browse/index.vue，我有一个像这样的 vuetify 图像标签：

<v-img
  src="~/assets/img/test.png"
  style="width:300px"
  contain
></v-img>

图像位于assets/img/test.png，但是，每当我启动 Nuxt 服务器时，图像都不会显示，下面是从 Chrome 开发工具复制的 div 元素：

<div class="v-image__image v-image__image--contain" style="background-image: url(&quot;http://localhost:3333/browse/~/assets/img/test.png&quot;); background-position: center center;"></div>

图像仅在我不使用 Vuetify 图像组件时才有效：

<img
  src="~/assets/img/test.png"
  style="width:300px"
/>

Answer 1

考虑在static文件夹下添加图像。assets文件夹用于存放需要 webpack 解析的 css/sass/scss 文件。是的，您可以添加小图像assets，然后在 webpack 解析时将其转换为 base64。但是这些图像可以只使用<img />标签而不是通过<v-img />vuetify 的组件加载到应用程序上。

我的理解是<img />可以采用 base64 字符串，然后它会加载相应的图像，但<v-img />它期望src是图像的 URL。当你给一个 base64 时，繁荣，它不会加载任何东西！！！

使用static文件夹

--static
  --img

然后您可以使用从应用程序的任何位置访问图像

<v-img src="img/test.png"/>

Answer 2

你在使用 Nuxt 2.0 吗？如果是这样，请注意此处 webpack 部分中的警告：

警告：从 Nuxt 2.0 开始， ~/ 别名将无法在您的 CSS 文件中正确解析。您必须在 url CSS 引用中使用 ~assets（不带斜杠）或 @ 别名，即 background: url("~assets/banner.svg")