javascript - Vuetify 问题 - 尽管图像是从有效来源传入的,为什么 v-img 组件不显示任何内容?
问题描述
在 v-card-media 被贬值以支持 v-img 之前,我在夏天早些时候编写了这段代码。据我所见,我正在正确使用 v-img 并通过指定的 src 道具传入我的源代码。
另一个问题提到了类似的问题,有人建议 v-img my not work with outdated browsers:Vuetify v-img component not loading images
我有最新版本的 firefox 和 chrome,v-img 在任何一种情况下都不会显示链接的图像。我知道信息正在传递,因为所有其他数据都显示得很好。我想知道这是否可能是链接的安全性问题,或者可能是与我忽略的链接有关的一些配置问题。有人在某处提到(我现在忘记了在哪里),vue 在从自定义组件的相关链接加载图像时遇到问题,但我传入的链接使用的是 http. 此外,我传入的图像在列表组件的头像图块中显示良好,因此我认为该问题与 v-img 密切相关。
尽管如此,我对发生的事情一无所知。我在下面粘贴了相关代码。如果有人对此有所了解,将不胜感激。
<template>
<div id="eventCard">
<v-container fluid grid-list-xl pb-0 grid-list-lg grid-list-md grid-list-xs>
<v-layout row wrap>
<v-flex
v-for="item in shows"
class="xs12 sm6 md4 xl4"
>
<v-card flat>
<v-img
class="secondaryFont--text"
height="300"
src="item.avatar"
alt=""
>
<v-container fill-height fluid>
<v-layout fill-height max no-margin>
<v-flex xs12 align-end flexbox max no-padding>
<v-container class="banner max">
<v-layout xs12 row>
<v-flex xs12 md9 v-if="item.title && item.acts" class="title">
<span class="clip-text">
{{item.title}}
<span>(</span>
<span v-if="item.acts" v-for="(act, index) in item.acts">
<span>{{act.name}}</span><span v-if="index+1 < item.acts.length">, </span>
</span>
<span>)</span>
</span>
</v-flex>
<v-flex hidden-sm-and-down xs3 text-xs-right>
<span v-if="item.price" v-html="item.price" class='headline clip-text'></span>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-text class='primaryFont--text'>
<div>
<span v-if="item.genre" v-html="item.genre"></span>
<span v-if="item.doors"> — Doors @ {{item.doors}}</span>
<span v-if="item.age"> ({{item.age}}+)</span>
<span v-if="item.location"> — {{item.location}}</span>
<br>
<span v-if="item.date" v-html="item.date"></span>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
这是上述组件的 css 代码:
.md-active {
background-color: red;
}
.center {
display: flex;
justify-content: center;
text-transform: capitalize;
}
.banner {
margin-top: 0px;
background-color: rgba(0, 0, 0, .6);
}
.clip-text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: flow-root;
}
.max {
max-width: 100%;
}
.card__media__content {
max-width: 100%;
}
.card {
cursor: pointer;
}
.no-padding {
padding: 0px !important;
}
.no-margin {
margin: 0px !important;
}
解决方案
我就是这样解决问题的
<v-img :src="require('item.avatar')" aspect-ratio="1"></v-img>
它应该正确显示图像
希望对你有帮助
推荐阅读
- .net - 实体图像未显示
- jquery - 在 Bootstrap 中设置弹出框
- linux - QEMU 内存分配问题
- python - 找到顶点之间的路径,在任何两个有食物的节点之间最多有 k 步
- javascript - 当对象在 duktape 中被删除/处置时,我该如何做一些清理工作?
- java - Android Studio Emulators 上是否存在 Android Network Provider?
- r - 如何在两列中查找具有相同值的行?
- r - 包未连接 xlconnect
- python - 使用正则表达式将文本解析为熊猫,但产生了空数据框
- css - 我的盒子尺寸确定有哪些问题?