We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Buscar en Ayuda

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Linking image attachments to HTML <img> src

  • 3 respuestas
  • 2 tienen este problema
  • 1 visita
  • Última respuesta de Zenos

more options

Hi there,

I've created a rather complex HTML email template and the issue I'm having is, once I've inserted the HTML (ie Insert -> HTML), I can't work out how to attach my images; to the tags in the HTML. In one of my earlier email template drafts I was working on, I was able to link them correctly and now I can't work it out. I also can't seem to find the article where I learned to do this. Very annoying.

I don't want to simply insert the images, because the css properties on the tags are very important to the responsiveness and design of the template.

How do I link the image file with my tags?


Thank you for your time. Yours sincerely,

James Kimberley

Hi there, I've created a rather complex HTML email template and the issue I'm having is, once I've inserted the HTML (ie Insert -> HTML), I can't work out how to attach my images; to the <img> tags in the HTML. In one of my earlier email template drafts I was working on, I was able to link them correctly and now I can't work it out. I also can't seem to find the article where I learned to do this. Very annoying. I don't want to simply insert the images, because the css properties on the <img> tags are very important to the responsiveness and design of the template. How do I link the image file with my <img> tags? Thank you for your time. Yours sincerely, James Kimberley

Todas las respuestas (3)

more options

Hmm, I've been looking at another problem where the user considers copy and paste to be a routine opperation. I see it as inefficient and error prone. Something you might use once to create a document template, but not as a recurrent action.

I would look at using the Stationery addon which allows you to choose and use an html document as a template. That eliminates the inherent risks of the copy and paste operation (Did you select the right material? Did you paste it in the right place? Was there anything else on the clipboard which you have now lost?) and as a bonus offers a tab where you can view and edit the html source.

If you have an image in an html-formatted email message, double-clicking it will open its Properties dialogue. But if you're working at tag level, you probably need to see the message source. (Ugh! Not something I'd want to have to do as a matter of routine) and if the Stationery addon doesn't suit you, there are other addons that allow you to see and edit html source.

https://freeshell.de/~kaosmos/edithtml-en.html

more options

Thank you for your support Zenos.

There doesn't appear to be any inherent issues with the email template on the HTML level or copying and pasting the text directly. In fact the email displays correctly, except for the images.

I just can't seem to remember how to link the images to the tags HTML. The annoying thing is, I have achieved it once before. And I have an example of the same template with the images displayed correctly. It's driving me batty.

I'll take a look at the addon you suggested, if all else fails. I might just use a different email client to get the functionality I need. I'm not deterred by working with HTML to create email templates. I'm a Web Developer and this kind of thing, is where I feel in my element.

Modificadas por Leversoft el

more options

This seems to be entirely an issue about editing html/css code. Thunderbird is an email client, not an html editor. But the suggested add-ons will let you work with the html code.

One difference between html for web pages and for email is that in email we prefer to embed the images, not link to a nearby folder. Since email cannot embed folders, you either need to encode the image into the email message, or host it on an internet facing server.

We have had many people here using Dreamweaver or whatever to compose email documents, but fall over because they don't really understand the way material is rendered from alternative resources when it is viewed as a web document, as opposed to the all-in-one style that works better for email.

I don't understand your "link images with tags". Image tags simply name the resource.

<img src="image.png">

What is there to "link"?

Use Insert|Image in Thunderbird and it will build that tag for you. A recent change is that it will now include an embedded image as a "data URI" rather than as a MIME component. This might be a point of difference with how you have done it in the past.