如何在img标签的src属性中显示.txt文件内的Base64格式图片

Ah, I’ve hit this exact snag before—let’s break down what’s going on and how to fix it.

When you paste the full Base64 string directly into the src attribute, you’re using a data URI (like data:image/gif;base64,ABC123...), which the browser immediately recognizes as an image resource. But when you point src to a .txt file, the browser treats it like plain text: it loads the raw Base64 content, but doesn’t wrap it into the data URI format it needs to render an image.

Here are the most straightforward fixes:

1. Use JavaScript to Fetch and Convert the TXT Content #

This is the quickest fix if you need to keep the .txt file as-is. We’ll load the file’s text, add the required data URI prefix, and assign it to the image’s src:

const loadingImg = document.getElementById('loading');

fetch('assets/images/loader_gif.txt')
  .then(response => response.text())
  .then(base64Content => {
    // Trim any extra whitespace/newlines and add the correct data URI prefix
    // Replace "image/gif" with your actual image type (png/jpeg/etc.)
    loadingImg.src = `data:image/gif;base64,${base64Content.trim()}`;
  })
  .catch(err => console.error('Failed to load loader:', err));

Make sure the prefix matches your image’s format—if it’s a PNG, use data:image/png;base64, instead.

2. Configure Your Server to Serve the TXT File as an Image #

If you don’t want to use JS, you can tweak your server to send the .txt file with the correct MIME type and wrap the content into a valid data URI. For example:

• For Apache: Add this to your .htaccess file (targeting just your loader file):

  <Files "loader_gif.txt">
    ForceType image/gif
    Header set Content-Transfer-Encoding base64
  </Files>
  

• For Nginx: Add a location block in your config:

  location = /assets/images/loader_gif.txt {
    types {}
    default_type image/gif;
    add_header Content-Transfer-Encoding base64;
  }
  

Note: This method depends on your server setup, and not all hosts allow custom MIME type configurations.

3. Convert the Base64 to an Actual Image File (Cleanest Long-Term Fix) #

Instead of storing Base64 in a .txt file, just decode it into a real image file (like loader_gif.gif). You can use online tools or command-line scripts to do this:

• On Linux/macOS:

  base64 -d loader_gif.txt > loader_gif.gif
  

Then update your img tag to point directly to the image:

<img id="loading" src="assets/images/loader_gif.gif" alt="Red dot" />

This eliminates the extra layer of Base64 handling and works seamlessly without extra config.

Quick Check #

Double-check if your .txt file already includes the data:image/...;base64, prefix. If it does, you can skip adding it in the JS solution—just assign the raw text directly to src.

内容的提问来源于stack exchange，提问作者Anthony Cuartero