javascript - Nuxt.js + vuetify 图像未加载
问题描述
我正在使用 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 />
标签而不是通过<v-img />
vuetify 的组件加载到应用程序上。
我的理解是<img />
可以采用 base64 字符串,然后它会加载相应的图像,但<v-img />
它期望src
是图像的 URL。当你给一个base64时,繁荣,它不会加载任何东西!!!
使用static
文件夹
--static
--img
然后您可以使用从应用程序的任何位置访问图像
<v-img src="img/test.png"/>
推荐阅读
- xml - 如何在 Rust 中读取/写入 XML 到 TcpStream?
- python - 在 tensorflow 中为 CBOW 模型生成数据
- sql - PL/SQL Developer 命令窗口脚本编码
- c# - 单击图表并使用 MVVM 在另一个窗口中打开相同的图表?
- vim - 在多行上从行尾更改第 n 列
- google-cloud-platform - 将云存储和云运行映射到同一域以避免CORS
- spring-boot - 当 Hashicorp 保险库被密封时,令牌身份验证不起作用
- c# - MVC Dropdownlist 只返回项目的 id,而不是项目的名称
- javascript - Electron:从 main.js 向 index.js 发送消息
- spring-boot - 如何在 Spring Boot 中验证唯一的事务 ID?