带有base64图像的v卡媒体 [英] v-card-media with base64 image

问题描述

我正在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%">

演示: 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卡媒体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！