[Python] Why do images load fully in single HTML files but not in a merged HTML file? [closed]

I have a large number of .htm files stored in the following folder:

E:\Desktop\New folder (5)\New folder (2)


All these .htm files share common CSS, images, and JavaScript files, which are located in the following subfolder:

E:\Desktop\New folder (5)\New folder (2)\Flo


The issue:

• When I open each .htm file individually, all images load correctly.
• However, when I merge multiple .htm files into a single .htm file (either using sections with page breaks or as multiple pages within one HTML file), the images do not load fully.
• In the merged file, images either do not load completely or appear only partially (e.g., only 50% of the image is visible).

I use following python script for merging my htm files:

import os

def merge_html_files(input_dir, output_dir, batch_size=15):
os.makedirs(output_dir, exist_ok=True)

# Get all .htm files, excluding unwanted files
files = [f for f in os.listdir(input_dir)
if f.endswith(".htm") and f != "Flourish template_ Bar chart race.htm"]

files.sort() # Sort files to merge in order

for i in range(0, len(files), batch_size):
batch_files = files[i:i+batch_size]
output_filename = os.path.join(output_dir, f'merged_{i//batch_size + 1}.htm')

with open(output_filename, 'w', encoding='utf-8') as output_file:
# Start HTML with CSS for page breaks and styling
output_file.write("""
<html><head>
<style>
@media print { .page-break { page-break-before: always; } }
h2 { text-align: center; font-family: Arial, sans-serif; color: #333; white-space: pre-line; }
.content { margin: 20px; }
</style>
</head><body>
""")

for index, file in enumerate(batch_files):
input_filepath = os.path.join(input_dir, file)
file_name_without_ext = os.path.splitext(file)[0] # Remove file extension

with open(input_filepath, 'r', encoding='utf-8') as input_file:
content = input_file.read()

if index > 0:
output_file.write("<div class='page-break'></div>\n") # Add page break

# Add formatted filename header with ///// and line breaks
output_file.write(f"<h2>\n\n///// {file_name_without_ext} /////\n\n</h2>\n")
output_file.write(f"<div class='content'>{content}</div>\n") # Wrap content for spacing

output_file.write("</body></html>") # Close HTML

print(f"Merged {len(batch_files)} files into: {output_filename}")

# Define input and output directories
input_directory = r"E:\Desktop\New folder (5)\New folder (2)"
output_directory = r"E:\Desktop\New folder (5)\New folder (3)"

# Run the merging function
merge_html_files(input_directory, output_directory)


What could be causing this issue? Is there a limitation on loading external images in a merged HTML file, or is it related to CSS, JavaScript, or browser behavior?

Any insights would be appreciated!

Continue reading...