1

Boa noite.

Eu tenho um formulário que possui um input que recebe uma url por ajax.

Como eu posso pegar essa url e preencher outro input para visualizar a imagem ?

JS (aqui passo o id do input que vai receber a url):

$("#thumb").val(json.items[0].volumeInfo.imageLinks.thumbnail);

INPUT 1 (aqui o input é preenchido com a url que irei salvar):

<input type="text" id="thumb" value="http://books.google.com/books/content?id=-2DSc30QWpEC&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"  />                                              

INPUT 2 (Aqui eu gostaria de mostrar a imagem e não consigo):

<input type="image" src="" id="thumb2" >    

É possível?

4
  • Eu não entendi muito bem o que a senhora deseja fazer. Poderia explicar melhor? Commented 10/01/2018 às 2:35
  • não existe input type="img"... não seria input type="image"?
    – Sam
    Commented 10/01/2018 às 2:39
  • @lffg tipo no primeiro input eu recebo a URL pra salvar no meu banco. Esse input não vai aparecer para o usuário. No segundo input eu queria mostrar a imagem .
    – AmandaRJ
    Commented 10/01/2018 às 2:42
  • @dvd já corrigi. Desculpe.
    – AmandaRJ
    Commented 10/01/2018 às 2:43

1 Resposta 1

1

Você tem que inserir a imagem no src do input #thumb2 pegando o value do input #thumb, após o retorno do Ajax no :success:

<script>
...ajax
success: function() {
    $("#thumb2").attr("src",$("#thumb").val());
}
</script>

Inputs do tipo image precisam ter um src de onde vão puxar uma imagem, que será o conteúdo do elemento.

Mais informações nessa documentação do MDN.

6
  • fiz as modificações que você passou e mesmo assim ainda não preenche. Coloquei essa sua sugestão $("#thumb2").attr("src",$("#thumb").val()); e não funcionou.
    – AmandaRJ
    Commented 10/01/2018 às 3:05
  • @AmandaRJ coloque $("#thumb2").attr("src",$("#thumb").val()); somente após o retorno do Ajax.
    – Sam
    Commented 10/01/2018 às 3:06
  • @AmandaRJ Isso quando o input thumb já estiver com valor preenchido.
    – Sam
    Commented 10/01/2018 às 3:06
  • @AmandaRJ, se você está recebendo uma imagem via AJAX, você deve passar um parâmetro para a função success, dessa forma: success: function(linkImage) { e substituir $("#thumb").val() por linkImage. Caso você esteja utilizando um objeto/array, é necessário colocar o caminho completo, ex: linkImage.thumbnail.src. Commented 10/01/2018 às 3:17
  • @dvd, já tinha feito isso que você disse. Só consegui fazer funcionar usando isso: <img src="" id="thumb2" alt=""> . Obrigada, funcionando perfeitamente.
    – AmandaRJ
    Commented 10/01/2018 às 3:20

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 .