Ir ao conteúdo
  • Cadastre-se
Joao_Lucaas

RESOLVIDO Como alterar o valor do atributo src de acordo com uma entrada de dados?

Recommended Posts

 Tenho esse projeto, onde usuários de um jogo inserem vossos nicknames e aparece uma miniatura de seus avatares. Não fiz nada além de modificar o "src=''" de uma tag "img", para o link do servidor oficial, onde contém a foto do avatar, correspondente.

Resumindo:

 

insere nick -> onclick: muda src do img -> img recebe imagem do avatar de um usuário

 

O problema é que quando o nick não existe, o servidor não mostra nenhum imagem, obviamente. Quando isso acontece eu tenho o retorno desse íconeCapturar.PNG

 

O projeto prevê que o usuário vá colocar nicknames errados, por isso, mesmo que a foto do avatar não exista no servidor, o site deve mostrar uma outra imagem, que não esse ícone, acima.

Agora, se estão acompanhando meu raciocínio, eu queria saber como detectar que a imagem não existe e mudar o src.

Editado por Joao_Lucaas
Uma vez que o moderador mudou o título, retirei trechos irrelevantes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Joao_Lucaas Entendi perfeitamente mas não é assim que funciona a coisa,

 

POrque o alt não é usado para links, definitivamente não.

Para isso você usa o javascript.  atribui o src  um valor diferente caso não esteja certo.

 

Veja um exemplo: https://jsfiddle.net/3bLgjbx8/

 

Para testar coloque "dif " no campo e clique em verficar.. depois coloque outro nome de usuário e clique de novo em verificar.

Com isso.. você pode combinar o uso do ajax com o php.. e fazer uma verificação em um banco de dados.. onde caso exista o nick, ele atribui o src do nick caso não exista.. ele atribui um src padrão 

 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif


Pior que acabei descobrindo um método menos braçal, antes mesmo de postares

.

Fiquei procurando palavras-chaves, para o Google mostrar algo relacionado e, descobri o evento "onerror=".

Tudo que eu tenho que fazer é acionar uma função, que muda a source da img, quando der erro.

 

Como fica a tag:

<img src="http://servidor-oficial.com/nome-avatar-inexistente.png" onerror="mudaSrc(this)">

Como fica o JS:

function mudaSrc(e) {
    e.src = "aviso-em-imagem.png";
}

 

Apesar de seu método não me apetecer, agradeço e peço desculpa por não ter pesquisado mais, e ter consumido teu tempo. OBRIGADO!

Editado por Joao_Lucaas
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Joao_Lucaas Pode ser, mas pelo que eu pesquisei vi que ela é reconhecida pelos principais navegadores só.

Isso quer dizer que se a pessoa não estiver usando um desses 5 (chrome, ie, firefox, safari e opera), pode não funcionar.

 

Melhor garantir a funcionalidade para qualquer navegador que suporte javascript com a solução que apresentei.. 

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×