3

Tenho um campo de input que deve receber uma imagem, ao recebe-la devo adiciona-la como background-image de uma div. Para isto, utilizei o FileReader para obter a base64 da imagem. Funciona bem, porém o CSS não consegue carregar a imagem. Como são inputs do usuário não consigo pegar uma URL.

Já tentei usando:

document.getElementById('div').style.backgoundImage = "url('${imageData}')";

.div{
        position: absolute;
        background-image: url('${imageData}');
    }
2
  • Por que colocar no CSS se o JavaScript já alterou o background? Além do que o CSS é interpretado ao abrir a página, depois disso vc não consegue alterar o código-fonte dele.
    – Sam
    Commented 14/05/2019 às 14:22
  • O JavaScript não alterou o background, aqueles eram exemplos de tentativas falhas. Commented 14/05/2019 às 14:58

2 Respostas 2

2

Há dois erros no código:

  1. Falta a letra r em .backgoundImage. Seria .backgroundImage.
  2. A interpolação da string com placeholder ${} só vai funcionar entre os sinais de crase:
    document.getElementById('div').style.backgroundImage = `url(${imageData})`;

Veja um exemplo:

let imageData = "https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg";
document.getElementById('div').style.backgroundImage = `url(${imageData})`;
<div id="div" style="width: 500px; height: 300px; border: 1px solid #000"></div>

2
  • Agradeço por ter corrigido os erros, escrevi muito rapidamente e não me atentei a isso. De qualquer forma no codigo que estou tentando usar está tudo certo. Commented 14/05/2019 às 16:29
  • Como disse na própria pergunta a imagem é um input, não terei a url dela. Commented 14/05/2019 às 16:29
1

Sim você consegue fazer isso com a api FileReader.

Vale dar uma leitura também na seção de suporte dos browsers

function onSelectImage(event) {
	// se usuário não selecionou nenhum imagem não faça nada
	if (!event.target.files.length) return;

	// aqui pegaremos a primeira imagem da lista: FileList
	var selectedFile = event.target.files[0];

	// FileReader https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
	var reader = new FileReader();

	// assim que terminar de ler a imagem
	// jogá-la como plano de fundo da div#image-area
	reader.onload = function(event) {
		document.querySelector('#image-area').style.background = "url('" + event.target.result + "') no-repeat 0 0";
	};

	// Informa ao reader para ler a image como base64
	reader.readAsDataURL(selectedFile);
}
#image-area {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}
<input type="file" id="file_input" onchange="onSelectImage(event)"/>
<div id="image-area"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .