我正在ColdFusion中创建一个验证码图像,并将其作为REST提要与Taffy一起返回.然后在Vuetify中显示
I am creating a captcha image in ColdFusion and returning it as a REST feed with Taffy. It is then shown in Vuetify
冷融合/太妃糖代码
<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;">验证
如果我不使用高度,图像根本不会出来
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%">演示: 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卡媒体
发布评论