How to displayimage from google drive at page.html? - html

i trying use image from google drive at my html-page, i shared image and copied link to file.
and pasted it to image tag:
<img ng-src="https://drive.google.com/open?id=0B0etQtBsI2KmVGVmYjNOSS15VVk" />
but it don't displays:
may be somebody knows how i can resolve it ? Thanks for your answers!

That won't work, the link you are using is an html page.
Taken from question Displaying files (e.g. images) stored in Google Drive on a website
Replace the open part of the link with uc and it will work. It will become <img src="https://drive.google.com/uc?id=0B0etQtBsI2KmVGVmYjNOSS15VVk" />

Per October 2021, I tried this way and this is worked for me.
Make sure your file permission is "Anyone with the link (Anyone on the internet with this link can view)".
Copy your link. For example: https://drive.google.com/file/d/1ABKic44czHx37335mQSfFzOuX4WUk3II/view?usp=sharing.This is my image:
Open this link in the new tab of your browser.
After that, click in this image and drag into new tab. You will see a drop down arrow like in this picture:
Copy the link from this new tab. For my link it will become: https://lh4.googleusercontent.com/2OwFYkb4hQl4f7HmBoS__I1k6MUy7Vxz2dYrYHkL6J-VegICE-Ie81ZKfKF-vvqv8GQ8S5A4XxIMYaEvWpI=w3360-h1720-rw

Related

How can I find the source code of any google doodle?

I am trying to find embed in HTML for the Halloween 2018 (https://www.google.com/doodles/halloween-2018) google doodle into a site.
I have tried view-source, but I only get a gif for the cover for the doodle.
Is there any other way I can get the HTML source code?
view-source:https://www.google.com/doodles/halloween-2018
That?
Did you try it after you clicked the doodle? I just opened it up, then did ctrl-U
Also, you could just put view-source: in front of any url and open it up without doing it from the site

How do I force an html file to open in the browser instead of downloading? (Classic Google Sites)

I'm using classic google sites and uploaded an html file. However, when I click on the link instead of opening directly on a new tab it tries to download it. So, how can I force that by clicking the link it opens directly in the browser?
Link location:
http://www.rodriguesloures.com/econometrics.html?attredirects=0&d=1
Code:
<div style="vertical-align:middle"><img alt="" src="https://sites.google.com/site/arloures/julia-language.png" style="vertical-align:middle" title="julia" width="25" height="25" border="0"> Applied Econometrics using Julia</div>
Thanks for you feedback!
Alexandre
You probably generated your html file with PANDOC and uploaded it to your site as page attachment (using Add file link). Google treats all attachments as files for download only.
What you can try to do is:
create a new page called econometrics for example
at the new page's EDIT pane click <html> button, Edit HTML popup window should be open now
Paste your entire HTML content into text area and hit update button
Now, all links to this page will open your HTML and not download it

Why link on image from Google/Microsofot Drive is not working in html as src img? Or how to make it work?

I want to use images stored online like at my Google or Microsoft drive (or any other online storage) as links at a my website.
How to make it working? I tried to insert links like this. Only the link from w3schools was working: (but if enter in browser all 3 links are working). Whatever I tried I cannot generate links in Google or Microsoft drive that will work as image links. Is it not possible there? If so what is alternative to generate linkable image resources?
<!--not working links from google and microsoft drives:-->
<p>
<img src="https://drive.google.com/file/d/1ofVPo7Ni4YQQXb-tSrmxBjcXsJiiLnwz/view?usp=sharing" alt="image test">
</p>
<p>
<img src="https://1drv.ms/i/s!Ampo_wgRsj_Tg_NU8t_oA2t0Ph4rTw" alt="image test">
</p>
<!--working link:-->
<p>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image test">
</p>
The link you're giving to your src isnt a direct link to a picture. It is a link to a website (in this case, your shared file on Drive) which contains the image. The actual image address you need to feed the src is diffrent. To find it, right click the picture and press "Copy image address".
You shall give the URL to the image and not the site.
For example - https://lh3.googleusercontent.com/YN9L7WKpVDA3MFVQSP5NNPHaBkALPYiYrK-fdisD4ViXbAiKfimwpO9i00ts7HZqiSseEE-ZilC2yqElVJm9=w3360-h1744-rw
See this pen
I accept Robert S answer as correct answer to my question for why part. I also found a solution which helped me: it worked well in AWS S3 bucket. I just uploaded images there and it gives the true images links. Important in AWS it need to allow "public access" to resource.

Image not being retrieved from Dropbox

Hi!
I have an image slider. When I try toe retrieve the images from my server, the images are properly displayed. (http://stthomasmountmtc.org/index.html)
However, when I try to retrieve the same images from Dropbox, the images are not displayed/retrieved. (http://stthomasmountmtc.org/index1.html)
<img src="https://www.dropbox.com/s/woart55urbw792u/image1.jpg" alt="image" />
When I open the link in the src attribute in the browser, the images can be seen, so the link is obviously not broken. Please share your suggestions.
Thanks,
Samuel Mathews.
The link in your code opens the gallery feature of Dropbox, which is a HTML webpage, not an image file. The direct link for that image is:
https://dl.dropboxusercontent.com/s/woart55urbw792u/image1.jpg
You should always set the source of an image tag in HTML to an URL which outputs an image - and not a webpage containing an image.
Another option to view a Dropbox image directly is to access the Dropbox link using the ?raw=1 parameter.
For example, if the Dropbox link is:
https://www.dropbox.com/s/83dcx4efx791s2i/stackoverflow.png?dl=0
change the ?dl=0 to ?raw=1, such as:
https://www.dropbox.com/s/83dcx4efx791s2i/stackoverflow.png?raw=1
Note that using "?dl=1" (instead of dl=0) will download the image.
Reference: https://www.dropbox.com/help/201
I was able to get this to work while trying to address a similar problem by logging into Dropbox, viewing the image itself, right clicking on the image and selecting "Copy Image Address".

Linking to Facebox from Google map Info Window v3

Hello using Google maps V3 Infowindow with link, If click on the link I want to show the information in a FaceBox. The only problem I have is that I cannot get it to work when linked to from an info window. It works perfectly when linked to from a regular link. Does anyone know what I may be doing wrong to prevent it from working? I have all of the necessary .css and .js files on the server. I know these are placed correctly since, i am using the same facebox in the same page works perfectly when linked to from a regular link
This is my below code to load the content in infowindow
<div class="mt">
<div class="fl">
<a id="detailsLink" class="jsDetailsLink" href="/profile/201/Brehead" rel="facebox">More profile information</a>
</div>
</div>
This just loads as a new page in the browser window (It is supposed to load into a Facebox window)
Thanks to everyone who is so kind as to help me out. I am fairly new to google maps and appreciate all assistance!
Info Windows are not clickable. If you want to add a clickable hyperlink then you should add an Infobubble. The javascript for this can be found at this link. Note that these were only implemented in Google Maps v 3. The github download for infobubble is here