I am creating a captcha image in ColdFusion and returning it as a REST feed with Taffy. It is then shown in Vuetify
ColdFusion / Taffy code
<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>
It returns something like this:
{"status":"success","captcha_image":"data:image/png;base64,iVBORw0KG /d67W8EALALKJQAABBYAAAILABAYAEAILAAdr...
Vue
I can display the image via
<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>
Is there a work around? Or is <v-card-media
the wrong tool for this?
The reason is that
v-card-media
use the image as a background image of adiv
with fixed height.If you want to keep the aspect ratio. You can use
<img />
tag with awidth="100%"
instead.demo: https://codepen.io/jacobgoh101/pen/bMrBWx?&editors=101