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 />標簽而不是通過 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 文件中的 ~/ 別名將無法正確解析。 您必須在 url CSS 引用中使用 ~assets（不帶斜杠）或 @ 別名，即 background: 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