我正在 ColdFusion 中创建验证码图像,并将其作为 Taffy 的 REST feed 返回。然后在 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
如果我不使用高度,图像根本不会出来
如果我使用这样的高度,则会出现错误的纵横比。
<v-card-media :src="captcha_image" height="100px"></v-card-media>
有解决办法吗?或者是<v-card-media
错误的工具?