- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在夏天早些时候写了这段代码,当时 v-card-media 被贬值以支持 v-img。据我所知,我正确地使用了 v-img 并通过指定的 src prop 传入了我的源代码。
另一个问题提到了类似的问题,有人建议 v-img 我不能在过时的浏览器上工作: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>
它应该正确显示图像
希望对你有帮助
关于javascript - Vuetify 问题 - 尽管图像是从有效来源传入的,为什么 v-img 组件不显示任何内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53112247/
我正在用 robocopy 编写一个 powershell 脚本来从列表中复制“完整的”unc/文件名路径。我遇到的问题是 robocopy 似乎在我的源路径末尾添加了一个 \。 我有一个 C:\te
我发现守护程序通过这些代码创建了一个容器 // NewBaseContainer creates a new container with its // basic configuration. fu
是否有所有潜在 map 源的列表?在示例页面上,可以浏览四种类型的 map 。外面还有什么? http://tombatossals.github.io/angular-leaflet-directi
是否有所有潜在 map 源的列表?在示例页面上,可以浏览四种类型的 map 。外面还有什么? http://tombatossals.github.io/angular-leaflet-directi
我们的网站比较多,第一次使用ElasticSearch不知道应该怎么配置ES: 我们想使用 ES 作为这些网站的唯一搜索引擎,我们是否应该为每个网站设置单独的 ES 实例? (我想这可能比一个 ES
我需要一些关于我对 UNI 项目的想法的建议。 我想知道是否可以将一个音频文件从不同的音频源分成不同的“流”。例如,将音频文件拆分为:引擎噪音、火车噪音、人声、并非始终存在的不同声音等。 我不一定需要
我想设置“公共(public)彩票”,每个人都可以看到选择是随机和公平的。如果我只需要一点,我会使用例如当天收盘道琼斯指数的 LSB。问题是,我需要 32 位。我需要一个来源: 每日可用 全世界都可以
来自 pickle 的 python 文档: Warning The pickle module is not secure. Only unpickle data you trust. 什么是 pi
我试图安排一个 liquidsoap 流媒体源在未来的特定日期和时间播放。我相信这可以使用 Liquidsoap switch 命令来完成,但我无法理解此处描述的文档:http://liquidsoa
对于Shiny应用程序,我希望能够播放在 session 本身期间生成的音频文件。 如果它是我要上传的音频文件,我将使用 tags$audio(src = "www/name.wav", ty
我想更改我的 OpenGL 来源。图片会说明: 现在是这样的: 这就是我想要的: 当前代码 gl.glViewport(0, 0, width, height); gl.glMatrixMode(GL
我正在尝试让 Stripe 运行起来,我几乎已经完成了,但有一件令人困惑的事情。 source: 'tok_visa' 部分。看起来它可以是“tok_mastercard”、“bank_account
我已经下载了 primefaces 源代码,看看是否可以从中学习。该 jar 包含一堆使用编写器来处理渲染等的 java 类。我期待找到一些 .xhtml 文件 ... and etc etc
如果我查看页面源代码,我会看到 styling += 'ul#topnav a.tabHeader5'; styling += '{'
我正在尝试根据显示器的大小更改背景图像。它不在服务器上运行。您可以在 https://github.com/Umpalompa/Umpalompa.github.io 找到我的所有代码. 我尝试同时使
从here的最底部开始.有一个 URL 生成器,我可以使用引荐来源网址在 Google Play 上生成指向我的应用程序的链接。我如何从谷歌分析中提取该 Activity 来源?我一直在谷歌上搜索,但
我用 Google Weather API 制作了一个插件,目前我正在从 Google 的 API 中提取图像。对于晴天,我正在拉 http://www.google.com//ig/images/w
是否可以通过环境变量为 @CrossOrigin 注释指定来源?我想这样做,以便我可以将相同的代码库用于 uat/staging/production。我希望我的 uat/staging 环境可以通过
我需要等待我的 JavaScript 中的文档准备就绪,才能在正文底部插入一个 div。 我想: 使此 JavaScript 文件尽可能小(如果可能,将其编译到 < 1kb) 在闭包中内联提供文档就绪
我正在开发电子邮件服务并想连接到谷歌帐户,是否可以将我的本地主机用作授权的 JavaScript 来源? 最佳答案 第 1 步:启用 Google+ API http://localhost:4567
我是一名优秀的程序员,十分优秀!