[英]Nuxt.js + vuetify image not loading
我正在使用 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("http://localhost:3333/browse/~/assets/img/test.png"); background-position: center center;"></div>
该图像仅在我不使用这样的 Vuetify 图像组件时才有效:
<img
src="~/assets/img/test.png"
style="width:300px"
/>
考虑在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"/>
您使用的是 Nuxt 2.0 吗? 如果是这样,请注意此处 webpack 部分中的警告:
警告:从 Nuxt 2.0 开始,您的 CSS 文件中的 ~/ 别名将无法正确解析。 您必须在 url CSS 引用中使用 ~assets(不带斜杠)或 @ 别名,即 background: url("~assets/banner.svg")
您可以将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>
尝试像这样要求图像: <v-img:src="require('~/assets/images/background-1.jpg')" />
这对我有用。
问题似乎出在 v-img 而不是 nuxt
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.