Member Avatar for dennishall

Hi All:

I am trying to load an image into a div using AJAX.
Instead on loading the image, I get �PNG as the result in the div.

Does anyone know how to load an image into a div?

Best Regards,
dennishall

  • 2 Contributors
  • 5 Replies
  • 1K Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by hielo

Dani AI

Generated

Brief note tied to the thread: 's diagnosis was correct — the garbled text appears because raw image bytes were being inserted into the DOM as text instead of letting the browser render an image element. That is why saw the PNG header characters in the div. The safer, more robust pattern is to create an image element with the browser-handed src (or to create an object URL/data URL when you actually fetch binary via AJAX), attach load/error handlers, and then insert that element into the container using DOM APIs rather than concatenating HTML strings.

Example: create an image node and append it (keeps things safe and lets you attach handlers)

var img = document.createElement('img');
img.alt = 'image';
img.onload = function(){ /* ready: hide spinner */ };
img.onerror = function(){ /* show fallback */ };
img.src = imageUrl;
var container = document.getElementById(containerId);
container.textContent = ''; // clear safely
container.appendChild(img);

If the image bytes come via fetch/XHR, request a Blob and use an object URL so the browser decodes it correctly:

fetch(imageUrl)
  .then(function(r){ return r.blob(); })
  .then(function(blob){
    var obj = URL.createObjectURL(blob);
    var i = new Image();
    i.onload = function(){ URL.revokeObjectURL(obj); };
    i.src = obj;
    document.getElementById(containerId).appendChild(i);
  });

Final tips: set width/height to reduce layout shift, always include alt text, revoke object URLs after load, and ensure server responses use the correct Content-Type (e.g., image/png) when serving raw bytes.

Recommended Answers

All 5 Replies

Member Avatar for hielo

What you are actually (incorrectly) doing now is inserting the "BINARY" image content into the div. What you need to do is to insert and <IMG> tag into the div and set the SRC attribute to the path of the image. The browser will take care of the rendering.

commented: nice, getting all that from such a short post +1
Member Avatar for dennishall

What you are actually (incorrectly) doing now is inserting the "BINARY" image content into the div. What you need to do is to insert and <IMG> tag into the div and set the SRC attribute to the path of the image. The browser will take care of the rendering.

Thanks for the reply hielo:

My bad, I failed to mention that I'm loading the image via javascript.
The onclick syntax is the javascript('file', 'div_id')

I'm at a loss as to where I can insert the image tag in the following line of code:
<a href="javascript:void(0)" onclick="ajaxpage('image.png', 'rightcolumn');">Image 1</a>

Best Regards,
dennishall

Member Avatar for hielo 
function ajaxpage(url,container)
{
 if(/\.(gif|png|jpg)$/i.test(url))
 {
   document.getElementById(container).innerHTML='<img src="'+url+'" alt="" />';
  return;
 }
 //whatever you currently have, should remain untouched
 ...
}
Member Avatar for dennishall 
function ajaxpage(url,container)
{
 if(/\.(gif|png|jpg)$/i.test(url))
 {
   document.getElementById(container).innerHTML='<img src="'+url+'" alt="" />';
  return;
 }
 //whatever you currently have, should remain untouched
 ...
}

Thanks hielo:

I inserted the javascript you supplied into line 3 of the ajaxpage script, verified if I needed to change anything else to avoid conflict. I did not need to change anything else.

It worked out of the box.
This issue is resolved.

UR the best,
dennishall

Member Avatar for hielo

Glad to help Little Grasshopper.

Regards,
Hielo

Edited by hielo because: typo
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.