Entrar Ainda não tem acesso?
2
respostas

Como renderizar uma imagem caso o link informado pelo usuário seja inválido?

Referente ao curso React: desenvolvendo com JavaScript

por Ericson Alves Martins de Castro
| 55.8k xp | 7 posts
Analista e Desenvolvedor de Sistemas

Ao preencher o formulário, caso o link seja inválido fica um espaço em branco com o conteúdo inserido na "alt" da tag "img". Gostaria de saber qual seria o meio de fazer com que, caso o react não renderize uma imagem (ou seja, caso o link informado não indique pra uma imagem, ou o usuário digite qualquer coisa) seja renderizado uma imagem padrão que eu definir.

Pesquisei sobre onLoad e onError e não consegui fazer funcionar.

Acredito q a lógica seria: Inserir um valor inicial para o state da imagem e caso o valor inserido não seja um link de uma imagem válida ele mantém o valor e não altera o state. Mas quando o usuário digita qualquer coisa ele altera esse valor. Então teria q inseria uma condicional pra verificar se a imagem foi carregada na tela e só ai alterar a imagem inicial, estou no caminho? Poderiam me informar qual a lógica usar? Meu código está exatamente igual o q foi feito no curso.

2 respostas
por Vinicios Neves
| 976.5k xp | 1063 posts
Instrutor Frontend Engineer

Salve, Ericson!

Existem várias formas de validar isso. Você poderia começar validando se o valor digitado no input é uma url válida.

Uma das formas de fazer isso é via regex, dá uma olhada nesse video e depois me diz se te ajudou :)

Outra coisa é validar se a imagem de fato existe no servidor, e uma das formas de fazermos isso é:

function imagemExiste(url_imagem){

    const http = new XMLHttpRequest();

    http.open('HEAD', url_imagem, false);
    http.send();

    return http.status != 404;

}

Bons estudos!

por Ericson Alves Martins de Castro
| 55.8k xp | 7 posts
Analista e Desenvolvedor de Sistemas

Bom dia! Vc poderia explicar o q está acontecendo nesse código digitado? No caso o url_imagem seria o image ou setImage usado no curso?

E pra fazer a verificação e renderizar a imagem na tela eu faria algo do tipo:

if imagemExiste == 404 {

setImage == "endereço da minha imagem padrão"

}

Vc poderia me ajudar na sintaxe pro código funcionar certinho?