base64 이미지의 v-card-media

base64 이미지의 v-card-media

ColdFusion에서 캡차 이미지를 생성하여 Taffy와의 REST 피드로 반송합니다.그런 다음 Vuetify에 표시됩니다.

Cold Fusion / Taffy 코드

<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...

뷰

이미지를 표시할 수 있습니다.

<img :src="captcha_image" height="100px;">

Vuetify

높이를 사용하지 않으면 이미지가 전혀 나오지 않습니다.

이렇게 높이로 하면 가로 세로 비율이 잘못 나와요.

<v-card-media :src="captcha_image" height="100px"></v-card-media>

근처에 일거리가 있나요?아니면<v-card-media잘못된 도구일까요?

그 이유는v-card-media이미지를 배경 이미지로 사용하다div일정한 높이로.

가로 세로 비율을 유지하려면.사용할 수 있습니다.<img />로 꼬리표를 붙이다width="100%"대신.

<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>

언급URL : https://stackoverflow.com/questions/50166804/v-card-media-with-base64-image