Member Avatar for Naggelos

Hi,

I created an XML file that will hold the latest news and stories, and trying to display it now in my HTML file using Javscript (I scrapped XSLT, as it altered the CSS styling and alignments compared to the other pages and couldn't work my way around that).

So, my question, is it possible to store an image link in the XML file then use Javascript to bring it up in the HTML page?

I tried a few resources but none have worked.
If you have a few spare moments, please help! :)

Thanks in advance.

  • 3 Contributors
  • 5 Replies
  • 231 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by ajcoder

Dani AI

Generated

For and : the easiest, most robust approach is to put a plain URL (relative or absolute) for the image in your XML and have JavaScript read that URL and set it as the src of an img element. Converting images to Base64 and embedding them in XML is possible, but it increases file size and complexity. Below are concise examples and practical gotchas to get this working reliably.

// fetch -> parse -> insert image (modern browsers)
fetch('news.xml')
  .then(r => r.text())
  .then(text => new DOMParser().parseFromString(text, 'application/xml'))
  .then(xml => {
    // adjust selector to your XML structure
    const imgUrl = xml.querySelector('item image').textContent.trim();
    const img = document.createElement('img');
    img.src = imgUrl;
    document.querySelector('#newsTable').appendChild(img);
  })
  .catch(console.error);

If you must store the image as Base64 in XML, set the img.src to a data URI and include the correct MIME type:

// xml: <image64>iVBORw0KGgoAAAANS...</image64>
const b64 = xml.querySelector('image64').textContent.trim();
img.src = 'data:image/png;base64,' + b64;

Troubleshooting and tips:

  • If URLs contain & or other XML-significant chars, wrap them in <![CDATA[ ... ]]> or escape them (e.g., &amp;).
  • Fetching XML or images across domains requires proper CORS headers; lack of headers will block requests.
  • If testing from disk (file://) many browsers block XHR/fetch — run a simple local server (for example python -m http.server 8000) to avoid that.
  • Prefer storing URLs for larger images for better caching and performance. Use Base64 only for tiny inline images (icons) where embedding makes sense.

This covers the two approaches you mentioned; adapt selectors and element IDs to match your XML and page structure.

Recommended Answers

All 5 Replies

Member Avatar for Naggelos

I understand XML doesn't read binary. So if i convert the image with a Base64 encoder and place that in my XML file. Is there a way I can have javascript (or XML) decode it and display it using javascript (in a table).

But I basically just want to store the link of the image in the XML, and then have Javascript take that link from the XML file and display it on the HTML. Should be pretty straight forward, but have played with it a lot and nothing has worked!

Please help!

Edited by Naggelos because: n/a
Member Avatar for xml_looser

call me via icq 567877710

Member Avatar for Naggelos

call me via icq 567877710

I don't use ICQ, do you have skype?

Member Avatar for Naggelos

have installed it, and added you

Member Avatar for ajcoder

I need to know how to do this as well. I need to bring in an image using javascript form the xml file that has the url or location of the image. How do I do this?

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.