Ajax - Insert an image [duplicate]

Question

I'm learning to use AJAX, and I want to insert an image after click a button.

But the image doesn't appear, instead appears lots of characters.

How can I do it correct?

$(document).ready(function() {

  $('#botonAjax').click(function() {
    type: "GET",
    $.ajax({
      url: "Img/inlaw.png",
      success: function(result) {
        $('#divAjax1').append(result);
      }
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divAjax1">
  <h2>TEST AJAX</h2>
</div>

<button id="botonAjax">Cargar contenido externo</button>

Thank you very much ´

Just add an image element when loaded: $('#divAjax1').append($('<img />').attr('src', 'Img/inlaw.png'));. — muecas
– muecas, Commented May 13, 2018 at 18:23
@muecas Hi, if you write your answer down, I can mark it like the solution. Thank you — Lleims
– Lleims, Commented May 13, 2018 at 18:50

muecas · Accepted Answer · 2018-05-13 18:57:23Z

3

I don’t think this is the best option or solution, but when loading an image thru ajax will mean that when the request is completed, the image will be on the browsers cache so, you only need to append an image with the same source as the one from the ajax call:

$(document).ready(function() {
   $('#botonAjax').click(function() {
    $.ajax({
      url: "Img/inlaw.png",
      success: function(result) {
        $('#divAjax1').append($('<img />').attr('src', 'Img/inlaw.png'));
      }
    });
  });
});

answered May 13, 2018 at 18:57

muecas

4,3251 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vladimir M · Accepted Answer · 2018-05-13 18:30:17Z

2

Well... you have to understand, what exactly are you loading and how is it going to be integrated into your html.

Ajax request returns you contents of the image file, and you put it directly into the div. Yes - you see the contents of the image file, not the image itself.

To see the image you have 2 options:

1) don't use ajax. just have an 'img' element in your code and change the src property of it on button click. For more information check here so question

2) similarly, have the img element, but set the source in the form of CDATA. For reference on data uri check MDN

I hope this helps.

answered May 13, 2018 at 18:30

Vladimir M

4,4891 gold badge21 silver badges26 bronze badges

Collectives™ on Stack Overflow

Ajax - Insert an image [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related