cshtml local image not displaying in email html

Question

I have an email written in.cshtml with an image tag:

<img src="../../../Images/logo.jpg">

the logo.jpg image exists in MySite\Images\logo.jpg and the email cshtml exists in MySite\Views\Mail\ContactEmail.html.cshtml

However, when I intercept the email with Papercut, there is the x icon indicating that the image is missing. What could be causing the image not to load? It works fine when using a URL in place of the image path.

When looking at the body of the email received in Papercut, it shows the image src as:

<img src="../../../Images/logo.jpg">

Answer 1

You specified a relative path.

Software that loads your HTML tries to request image from path: http(s)://BASE_URL/../../../Images/logo.jpg

If you'd open it in browser hosted on http://somesite.com/folder/folder/folder/ContactEmail.html it would resolve your image url as: http://somesite.com/Images/logo.jpg .

If it was opened from local file file://C:/folder/folder/folder/ContactEmail.html it would resolve your URL to file://C:/Images/logo.jpg .

You need to:

1) Specify absolute URL (image should be hosted somewhere!)
or
2) You can encode your image in base64 and use it like this .

Answer 2

When you view an HTML page in your browser, the browser can resolve relative paths by issuing a new HTTP request. When viewing an email, there is no URL to the HTML you're viewing, so the relative path should be resolved relative to... what?

You need to use absolute URLs in an email, inline the image or send it as an attachment.