Can I have an image with a substitution tag in a SendGrid template?

I assume that you have managed to trigger the SendGrid API via Node.js, since you're tagging the question with the Express tag.

I'm currently trying to build transactional email template using SendGrid as well, and I managed to accomplish this.

You'd probably want to add a new image element first using the builder.

Then upload an image. Once your image is uploaded, double click on the image element. Grab the name of your image file and copy it.

Switch over to the code view.

In the code view, find the html tag that contains your name of your image file. Here's an example in my case.

Replace this code with your "substitution tag".

Save the template. Your template should be ready to use. In your Node.js code, set the substitution tag.

mail.personalizations[0].addSubstitution(new helper.Substitution("your-subtitution-tag", "image-url"));

I used this library: https://github.com/sendgrid/sendgrid-nodejs Hopefully your email should contain the new image.

I blurred out some sensitive contents above. This is the email result on my end. Hope this helps!

So as many noticed, Sendgrid has changed the ability to switch between "code-based" editor to "design WYSIWYG" editor after an email template has been initially created, thus making Nicholas's answer irrelevant (sorry mate). One must select at the creation point and then it sticks as that type of editor mode.

I assume that many of you (I know I do!) would like to retain the ability of having a visual editor of your emails (allowing designers and copy writers do their work without bothering developers with their changes) while not giving up on the customization goodies Sendgrid's dynamic emails offer.

I have found an alternative that, although a bit cumbersome, delivers the desired result.

Follow this set of instructions to insert a dynamic value to the src attribute of the img tags in your "wysiwyg" template editor:

1. Create a new Design Editor template (it will allow you to select this once you add your first version of that template).
2. Design your email - add texts, images and what not.
3. Select an image item box (the one you want to inject later the SRC URL to), and click on the view code icon to see the code behind (code-behind button).
4. Copy aside the URL value that's currently there (I assume you selected a temp image just to stylize your email on step 2) and then close this dialog without making any changes.
5. Go to the Import/Export section on the left Build sidebar (way down there), then click on Export HTML. Save the file and open it in a text editor.
6. Search for the URL you copied on step (4) and replace it with your dynamic variable of your choice (example: {{my_dynamic_logo_url}}).
7. Copy the entire file contents (after your changes in the previous step), then go back to the Sendgrid editor, and click on the Import button in the same Import/Export section from step (5).
8. Paste the file content in there and click Ok. It will look all the same (maybe only the image itself will vanish, but it's ok - trust me. Save your template now.
9. Voila - send your email via API, while injecting the desired URL to {{my_dynamic_logo_url}} - you should now be able to see that dynamic image displayed on the received email.
10. Just make it a nice round 10 here :P
    Attaching image that can help with the process