Nuxt.js + vuetify 图像未加载

Posted 2023-02-22

【中文标题】Nuxt.js + vuetify 图像未加载

【英文标题】：Nuxt.js + vuetify image not loading

【发布时间】：2020-07-25 15:22:12

【问题描述】：

我正在使用 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"
/>

【参考方案1】：

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

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

使用static 文件夹

--static
  --img

然后您可以使用

从应用程序的任何位置访问图像

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

【讨论】：

谢谢，我测试过了，其实是

【参考方案2】：

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

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

【参考方案3】：

您可以将v-img 标签包裹在no-s-s-r 标签内，类似这样。

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

如果这不起作用，你可以试试这个

<v-img
    :src="require('@/assets/img/test.jpg')"
    style="width:300px"
    contain
  ></v-img>

【参考方案4】：

尝试像这样要求图像：<v-img :src="require('~/assets/images/background-1.jpg')" />

这对我有用。

问题似乎出在 v-img 而不是 nuxt