Imagem base64 no html

Spring

HTML

Java

HTML5

18/02/2020

É possível inserir uma url da minha pi no html abaixo pra que o html converta o base64 em imagem no navegador?
<html>
<head><meta charset='UTF-8'>
</head>
<body>
<p> <img style='display:block; width:1024px;height:1024px;' id='base64image';
src = "data:image/jpeg;base64,???????????"/>
</p>
</body></html>
Kobomo

Kobomo

Curtidas 0

Melhor post

Stella Oliveira

Stella Oliveira

14/03/2020

Kobomo, o HTML não vai converter sua imagem. Por que ele é apenas uma linguagem de marcação, ele não tem esse poder. Você precisa baixar sua imagem e transformar ela pelo Javascript, pra então

let base64String = ""
var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
   base64String = reader.result
  }
  reader.readAsDataURL(file)


Você vai ver seu base64 no console

Seu trabalho daí pra frente é simples, com a string na mão:

  const imageNode = document.querySelector("#base64image")

  imageNode.src = base64String
GOSTEI 1

Mais Respostas

Kobomo

Kobomo

18/02/2020

É possível inserir uma url da minha api no html abaixo pra que o html converta o base64 em imagem no navegador?
<html>
<head><meta charset=''UTF-8''>
</head>
<body>
<p> <img style=''display:block; width:1024px;height:1024px;'' id=''base64image'';
src = "data:image/jpeg;base64,???????????"/>
</p>
</body></html>
GOSTEI 0
POSTAR