How to get image files working with the HTM tag <img src=> when absolute path contains whitespaces?

Question:

I am trying to embed a locally hosted picture in the outlook e-mail body using .htm file. If relevant I am creating e-mails with win32com.client package.

Absolute path of the .gif file: C:/Users/User/AppData/Roaming/Microsoft/Signatures/some folder/image.gif

.htm file content :

<img src = 'C:/Users/User/AppData/Roaming/Microsoft/Signatures/some%20folder/image.gif>

if I run the script with the following code snippet, created e-mails do not contain the target picture

from bs4 import BeautifulSoup

htm_path = 'C:/Users/User/AppData/Roaming/Microsoft/Signatures/signature.htm'
with open(htm_path, 'r', encoding='utf-8') as htm_file:
    for img in soup.findAll('img'):
        img['src'] = re.sub('%20', ' ', img['src'])

I am sure that the problems are causing whitespaces in the absolute path of the target .gif file. If I slightly modify the code to "remove" '%20' and remove whitespace from the directory that contains whitespace (C:/Users/User/AppData/Roaming/Microsoft/Signatures/somefolder/image.gif), the whole script runs as intended. The .gif file is embedded into the e-mail body.

from bs4 import BeautifulSoup

htm_path = 'C:/Users/User/AppData/Roaming/Microsoft/Signatures/signature.htm'
with open(htm_path, 'r', encoding='utf-8') as htm_file:
    for img in soup.findAll('img'):
        img['src'] = re.sub('%20', '', img['src'])

I’ve tried to search for a solution, but none of them that I’ve found worked. None of the found solutions had a file hosted on the local machine with absolute paths. Any help would be appreciated.

Note: I need to have defined absolute path in the .htm file to the target .gif file. Otherwise, outlook won’t find the target file. I hope I’ve been specific enough.

Edit (solution):

A solution from @MattieTK could work but the problem in my case is that I would need to upload every single picture on some server (imgur for example) and somehow define for every single user which image file to use. The script is going to be distributed to a few coworkers and the picture file is named the same on every system.

I’ve figured out a simple solution to fix the problem. I’ve added an extra condition. If the relative path to the image file includes whitespaces it creates a copy of a directory in the same directory as the HTML file (including the image file). The copied directory is named the same as the original but without whitespaces.

Asked By: Tevzi

||

Answers:

None of the found solutions had a file hosted on the local machine with absolute paths.

This would be for good reason. If all your files on your computer were accessible to anyone with the path to them, your computer wouldn’t be very secure!

The only way to do this would be to upload your gif to a webserver. You could run your own from your computer but that would require you to a) have the computer running as long as people were likely to view the email, and b) learn how to run a remotely accessible webserver.

I’d strongly suggest hosting the file on a third party webserver at least to get started and get over this hump. You could use something like imgur.com.

Answered By: MattieTK

It is a bit hard to see how to sanitate your paths without giving a few actual examples of them, but try this solution.

import html
img['src'] = html.unescape(img['src']).strip()
Answered By: Jae