带有 base64 图像的 v-card-media [英] v-card-media with base64 image
问题描述
我正在 ColdFusion 中创建一个验证码图像,并使用 Taffy 将其作为 REST 提要返回.然后在 Vuetify 中显示
I am creating a captcha image in ColdFusion and returning it as a REST feed with Taffy. It is then shown in Vuetify
ColdFusion/太妃糖代码
<cfscript>
component extends="taffy.core.resource" taffy_uri="/captcha" {
function get() hint="Sends one out" {
var captcha = CreateUUID().right(4) & DayOfWeekAsString(DayOfWeek(now())).left(1).lcase() & "!";
// This is ColdFusion
var tempFile = "ram:///#captcha#.txt";
var myImage = ImageCreateCaptcha(100, 300, captcha, "low");
ImageWriteBase64(myImage, tempFile, "png", true, true);
var myfile = FileRead(tempFile);
FileDelete(tempFile);
return rep({'status' : 'success', 'time' : GetHttpTimeString(now()),
'captcha_hash' : hash(captcha), 'captcha_image' : myFile
});
}
...
</cfscript>
它返回如下内容:
{"status":"success","captcha_image":"data:image/png;base64,iVBORw0KG /d67W8EALALKJQAABBYAAAILABAYAEAILAAdr...
Vue
我可以通过显示图像
<img :src="captcha_image" height="100px;">
Vuetify
如果我不使用高度,图像根本不会出来
If I don't use a height, the image does not come out at all
如果我使用这样的高度,就会出现错误的纵横比.
If I use a height like this, it comes out with the wrong aspect ratio.
<v-card-media :src="captcha_image" height="100px"></v-card-media>
有解决办法吗?还是 <v-card-media
是错误的工具?
Is there a work around? Or is <v-card-media
the wrong tool for this?
推荐答案
原因是v-card-media
把图片作为div
的背景图片高度固定.
The reason is that v-card-media
use the image as a background image of a div
with fixed height.
如果你想保持纵横比.你可以使用 <img/>
标签和 width="100%"
来代替.
If you want to keep the aspect ratio. You can use <img />
tag with a width="100%"
instead.
<img src="data:image/jpeg;base64,/9j/4AAQ..." width="100%">
演示:https://codepen.io/jacobgoh101/pen/bMrBWx?&editors=101
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<img src="data:image/jpeg;base64,/9j/4AAQ..." width="100%">
<v-card-title primary-title>
...
</v-card-title>
<v-card-actions>
...
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
这篇关于带有 base64 图像的 v-card-media的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!