Question

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

<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 />标签而不是通过vuetify的<v-img />组件加载到应用程序上。

我的理解是<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文件中正确显示。您必须使用〜资产（不带斜线）或网址CSS引用中的@别名，即背景： url（“〜assets / banner.svg”）

Answer 3

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

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

如果这不起作用，您可以尝试

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

Answer 4

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

对我有用。

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

Nuxt.js + vuetify图片未加载

4 个答案: