Question

Embedding an image from Google Drive into Gmail email

  • 19 August 2021
  • 11 replies
  • 2649 views

Hello!

 

I absolutely love your product!

 

Unfortunately I don’t know how to code HTML but am slowly learning.

I have read the Embedding images in the body of an email in Gmail thread but was still not able to do it.

I am trying to embed an image in my email from my google drive.

I have been largely unsuccessful. The furthest I have gotten is either a link to redirect to the image or I get a blank square where the image should be.

 

I have switched the body to be HTML.

 

I thought this code looked right. What am I doing wrong?

 

<iframe src="https://drive.google.com/file/d/1Qo9_1KJ8vByoaAhvcPLhZ8cX4mvbFV2I/preview" width="640" height="480" allow="autoplay"></iframe>


This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

11 replies

Userlevel 7
Badge +14

Hi @Otterbot 

Try using the IMG tag: https://www.w3schools.com/tags/tag_img.asp

@Troy Tessalone 

 

Thank you for your quick response.

 

I changed body type to HTML.

 

On my mobile I get the blank image placeholder and on the computer I get a broken image link.

 

I have tried using the IMG tag you sent.

 

<img src="https://drive.google.com/file/d/1Qo9_1KJ8vByoaAhvcPLhZ8cX4mvbFV2I/preview" alt="Otter Family" width="640" height="480">

 

Have you had anyone have success linking from Google Drive? What is the preferred method for embedding?

Userlevel 7
Badge +14

@Otterbot 

If you use a GDrive Find File step, you can get the different URLs available for a File.

For example, https://drive.google.com/file/d/1Qo9_1KJ8vByoaAhvcPLhZ8cX4mvbFV2I/edit

@Troy Tessalone 

Thank you working with me through this problem.

I replaced the preview to edit as you sent and still have the same problem.

<img src="https://drive.google.com/file/d/1Qo9_1KJ8vByoaAhvcPLhZ8cX4mvbFV2I/edit" alt="Otter Family" width="640" height="480">

 

Below is how they are coming across for me.

 

Any other solutions or problematic things you see with what I am doing?

 

 

Userlevel 7
Badge +14

@Otterbot

Try using a temp Zap step (GDrive Find File) to get the different URLs available for a File.

@Troy Tessalone 

 

My apologies. I am a little new to Zapier could you please clarify how I do that?

 

I have successfully attached from Google Drive as a downloadable file so thats the good news.

Userlevel 7
Badge +14

@Otterbot 

Try using a temp Zap step (GDrive Find File) to get the different URLs available for a File.

 

@Troy Tessalone 

Surprisingly I think I did it right.

 

I tried copy and pasting the embeded image string but it didnt work. Showed up as a clickable link on the test email.

Which one should I use? Or did I even do this correctly?

 

kind

drive#file

id

10kbZZcI5tKgYNx_aBbyV6lmAf8uVRbe2

etag

"MTYyOTQwMzYxMTAwMA"

selfLink

https://www.googleapis.com/drive/v2/files/10kbZZcI5tKgYNx_aBbyV6lmAf8uVRbe2

webContentLink

https://drive.google.com/uc?id=10kbZZcI5tKgYNx_aBbyV6lmAf8uVRbe2&export=download

alternateLink

https://docs.google.com/spreadsheets/d/10kbZZcI5tKgYNx_aBbyV6lmAf8uVRbe2/edit?usp=drivesdk&ouid=114927677152262793634&rtpof=true&sd=true

embedLink

https://drive.google.com/file/d/10kbZZcI5tKgYNx_aBbyV6lmAf8uVRbe2/preview?usp=drivesdk

iconLink

https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

thumbnailLink

https://lh3.googleusercontent.com/04hvvqJiayANyLWhXklR2Rc7iLRBgL_DAI_S2BAhw4nYGABZWiYkZXtqPosI_ZylOmH6DeY4-hsbdHo=s220

title

 

spaces

1

drive

file

(Exists but not shown)

 

 

 

 

Userlevel 7
Badge +14

Hi @Otterbot 

Looks like you’ve found a GSheets file in the GDrive.

You can test this by opening the URL in a new private browser to see if it renders as expected.

When you retrieve the correct GDrive File, try one of these links:

  • webContentLink
  • alternateLink

 

@Troy Tessalone 

 

None of alternate links worked except the one I originally pulled that we modified.

 

https://drive.google.com/file/d/1Qo9_1KJ8vByoaAhvcPLhZ8cX4mvbFV2I/edit

 

The rest of the links ask you to login to Gmail so we are back to this square.

 

Any other ideas? Or did I execute something improperly?

Userlevel 7
Badge +14

@Otterbot 

Check out this related article: