Replace Image in E-Mail Header

[DaveSH12]

Hello Community,
I'm trying to replace the logo_gray.png image in the E-Mail Header.
I'm using templates and I know that I have to change it in the email_header.hbs file.

My image is in the folder /images/ directly in the Vaultwarden Data Directory.
But it's not working, do you have any idea?

Here my config in email_header.hbs:
<img src="cid:logo" alt="Vaultwarden" width="190" height="50"

Name of the image is logo.png. I tried with ending .png, too.

My Docker Compose Config:

services:
vaultwarden:
restart: always
container_name: vaultwarden
image: vaultwarden/server:latest`
volumes:
- /data/vaultwarden:/data/
- /homes/jan/vaultwarden/etc/vaultwarden.d:/etc/vaultwarden.d
- /homes/jan/lbavita004.pem:/ssl/cert.pem:ro
- /homes/jan/chain.pem:/ssl/chain.pem:ro
- /homes/jan/privkey.pem:/ssl/key.pem:ro
- /var/log/vaultwarden:/var/log/
- /data/vaultwarden/images:/images
environment:
- ROCKET_TLS={certs="/ssl/cert.pem",key="/ssl/key.pem",chain="/ssl/chain.pem"}
- SMTP_HOST=xxxxxxxxx
- SMTP_FROM=[email protected]
- SMTP_FROM_NAME=XXXXXXX Vaultwarden
- SMTP_SECURITY=off
- SMTP_PORT=25
- LOGIN_RATELIMIT_MAX_BURST=10
- LOGIN_RATELIMIT_SECONDS=60
- DOMAIN=https://lbavita004.xxxxxxx.de
- INVITATION_ORG_NAME=XXXXX
- INVITATIONS_ALLOWED=true
- ADMIN_TOKEN='XXXXXXX'
- SIGNUPS_ALLOWED=false
- EMERGENCY_ACCESS_ALLOWED=false
- SENDS_ALLOWED=true
- WEB_VAULT_ENABLED=true
- ORG_GROUPS_ENABLED=true
- ORG_EVENTS_ENABLED=true
- ORG_CREATION_USERS=XXXXXX
- EXTENDED_LOGGING=true
- LOG_TIMESTAMP_FORMAT="%d.%m.%Y %H:%M:%S.%3f"
- LOG_LEVEL=info
#- USE_SYSLOG=true
- LOG_FILE=/var/log/vaultwarden.log
- PASSWORD_HINTS_ALLOWED=false
- USER_ATTACHMENT_LIMIT=50000
- USER_SEND_LIMIT=50000
- TRASH_AUTO_DELETE_DAYS=90
- INVITATION_EXPIRATION_HOURS=240
- EMAIL_CHANGE_ALLOWED=false
- TEMPLATES_FOLDER=data/templates
- RELOAD_TEMPLATES=true
- EXPERIMENTAL_CLIENT_FEATURE_FLAGS=autofill-overlay,autofill-v2
- TZ=Europe/Berlin

I hope anybody here can help me. I am searching so long time and now I have headache :-(

Kind regards,
David

[stefan0xC]

The logo-gray.png file is embedded into the vaultwarden binary

vaultwarden/src/api/web.rs

Line 155 in 248e561

"logo-gray.png" => Ok((ContentType::PNG, include_bytes!("../static/images/logo-gray.png"))),

so you can't just reference a different image to attach it.

However, if you set SMTP_EMBED_IMAGES=false the image will not be attached

vaultwarden/src/mail.rs

Lines 607 to 616 in 248e561

	let body = if CONFIG.smtp_embed_images() {
	let logo_gray_body = Body::new(crate::api::static_files("logo-gray.png").unwrap().1.to_vec());
	let mail_github_body = Body::new(crate::api::static_files("mail-github.png").unwrap().1.to_vec());
	MultiPart::alternative().singlepart(SinglePart::plain(body_text)).multipart(
	MultiPart::related()
	.singlepart(SinglePart::html(body_html))
	.singlepart(
	Attachment::new_inline(String::from("logo-gray.png"))
	.body(logo_gray_body, "image/png".parse().unwrap()),
	)

but it will be referenced as a URL instead

vaultwarden/src/config.rs

Lines 1046 to 1051 in 248e561

	fn generate_smtp_img_src(embed_images: bool, domain: &str) -> String {
	if embed_images {
	"cid:".to_string()
	} else {
	format!("{domain}/vw_static/")
	}

so you can just return a different image for the path /vw_static/logo-gray.png (via your reverse proxy) without changing the template.

[stefan0xC]

Why not serve the file /data/vaultwarden/images/logo.png directly? E.g.

location /vw_static/logo-gray.png {
   alias /data/vaultwarden/images/logo.png;
}

[DaveSH12]

Hi Stefan,
sorry I'm a noob in configuring ReverseProxy. What do you mean? Where I have to do this?

[stefan0xC]

If your Nginx Proxy Manager is running on the same machine, you should be able to configure that under Advanced Configuration tab and I'd recommend that you revert the other changes.
Because I don't know what you mean, when you say "Status changed to Offline." and what part of your setup contains mistakes. I suspect that you can't just proxy_pass a path to an image, but no idea what happens if you do, ie. what request your vaultwarden receives. (The mounting of /data/vaultwarden/images:/images seems to be irrelevant and setting TEMPLATES_FOLDER=/images seems semantically wrong to me.)

[DaveSH12]

I reverted my other changes and the code is now in advanced in nginx, but it's not working. Image isn't loading

[stefan0xC]

Well, can nginx access that file? What do the nginx logs say? The file has to be accessible to nginx for that to work of course.

[rpe1313]

So many answers - but the easiest way to do this is to actually embed the image in the email template.

As to make this semi-universal, I will convert using the base64 command that can be found in the container.

Creating Embedded Images

First, create a 'branding' (or any other name you wish) directory in the docker volume for /data/. In this directory, upload the logos or other images you want to be used.

Now, connect to your Vaultwarden docker container shell by issuing the docker command
docker -it <container name> /bin/bash

If done correctly, you should now see:
root@<container internal hostname>:/#

Now for simplicity change directories to that folder in the attached console:
cd /data/branding <enter>

Your console should look like this:
root@<container internal hostname>:/data/branding#

Now to convert the images to base64, the output is the actual data stream used to embed images in html, or in the email templates for this use case

For this example, I will use the favicon.ico file which is an x-icon mime type:
root@<container internal hostname>:/data/branding# base64 favicon.ico

Below is a portion of the output from my example command above, remember to copy the entire output:
AAABAAEA~AAAAA==

Copy this information from the console and place it using the instructions below. If you don't want so many lines in your code, remove the carriage returns after each line in your output or don't - either way it will work.

VERY IMPORTANT You will note that I specifically informed you that I was using x-icon mime type. If you are converting a png, jpg, gif, etc, you must correctly identify the mime type in the src otherwise your image may not properly be embedded.

Some mime types:
PNG = image/png
JPEG = image/jpg
GIF = image/gif
==Here's where they can get interesting==
SVG = image/svg+xml 
ICO = image/x-icon 
ICO = image/vnd.microsoft.icon 
TIF = image/tiff 

Here is my example with the above data in the src of the <img> tag: (I have shortened my data stream for reading - this image will not be viewable)
<img src="data:image/x-icon;AAABAAEA~AAAAA==" height=96 width=96 />

For those that work better with images - real-world code:

My email_footer.html.hbs:

After reloading Vaultwarden the footer image in the email_footer.html.hbs looks like this:

So how does this work?

The data:image/x-icon;<data stream> in the <img src= tag informs the html renderer that it is a data stream of an ICO file and then reads the base64 data stream.
Also, that is a semi-colon between the mime type and the data stream!!

Hope this helps! You can actually use this almost everywhere html is rendered.

EDIT: Oops, I forgot to mention, make sure you follow the instructions for using custom email templates found https://github.com/dani-garcia/vaultwarden/wiki/Translating-the-email-templates#how-to-translate--customize-the-templates