Nuxt.js + vuetify图片未加载

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

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