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".
Related
I know I can add images to a html file by the following syntax
<img src="*****">
But my question is can i copy any images link from the web and add them to my html file?
i'm not talking about the copyright laws regarding this, just, can every image link be used as the image source in html?
I was writing a code in codepen where i embedded a link to an image from devianart, but the image didn't show up.
I think it depends to the website policy; Some websites don't let you to use their hosted images in your webpage, and some others do.
this is what i find on W3schools:
Definition and Usage:
The required src attribute specifies the URL of the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like
src="image.gif")
Hope this is helpful :)
make sure image fully open in your browser tab/
i also check it but it work in codepen may be you doing something wrong first need to write clear what you want
try this image tag in codepen
t.co of twitter is not fetching images. After redirecting to another link it is unable to fetch the images.
my code is:
<pre>
<img class="imgmyclass" src="https://t.co/onj4Gps4rQ">
</pre>
please help.
Thanks
Because the url does not point to an image.
As far as the image in the link you are trying to extract the image from is concerned, use this:
<img class="imgmyclass" src="https://pbs.twimg.com/media/CZ4p4TCUAAEQKJt.jpg">
Where src tag is used to point to an image, not the url of a page which contains a post and an image associated with it.
If you want to extract the image url, open the html page, right click on the image and hit copy link address. Do not forget to Give proper credits to the owner of the image.
I'm trying to make a link in the form of an image, so that the person navigates directly to the page that image is linked to. However I have no idea how to do this. Right now I have the image itself but when I click it it leads to a whole other blank page.
Can this be done using the tools of wordpress or maybe I need to download a plugin? Or perhaps I need to use HTML codes or something of the sort?
To insert a link using an image from your computer, follow these steps:
Go to a post or page editing screen. Click the Add Media button.
Add Media Button
Upload a new image, or click the Media Library tab and click the image you’d like to use as a link.
frommedia
You’ll be able to see the image’s Attachment Details. Choose the Custom URL option under Attachment Display Settings. Type in the URL to which you want the image to link to.
attachmentdetails
Click the Insert into post button.
The image is inserted into your post and linked to whatever was typed in the Link To field.
image with link inside post
↑ Table of Contents ↑
Link to an Image URL
To insert a link using an image stored somewhere else on the Internet, follow these steps:
Click the Add Media button.
Add Media Button
Click the From URL link.
from url
Type the URL of the image file into the URL text box. Your image will show up along with some options. Choose Custom URL under the Link To section and type in the URL to which you want the image to link to.
imagefromurl
Click the Insert into post button.
The image is inserted into your post and linked to the web site you set.
image with link inside post
<img src="your image link" />
You need to click on TEXT tab in the WP Post dashboard and type some html ...
also need to know that there is no plugin for anything you imagine... some things are simple enough and a lot of people can do it on their own
If I understand you correctly all you need to do is wrap a around the <img src="">:
<img src="imagelink">
The above will have an image and if you click on the image then it will bring you to http://example.com
I am having trouble displaying an image from the internet on my html page.
The line is:
<img src="http://www.somepic..." alt="pic" />
What is wrong with it? Does that only work with images that are on my disk?
Thank you
Based on the URL you've presented in the comments above, my guess is that you're not actually linking to an image, you're liking to a web page but mistaking it for an image.
For instance, the url you provided:
http://www.google.co.il/imgres?q=picture&hl=iw&sa=X&rlz=1C1SKPL_enIL452IL452&tbm=isch&prmd=imvnsl&tbnid=BAlLxbccyZkwSM:&imgrefurl=http://animal.discovery.com/mammals/cheetah/&docid=qDOKJbIkYvvzyM&imgurl=http://animal.discovery.com/mammals/cheetah/pictures/cheetah-picture.jpg&w=625&h=450&ei=Y-grT8_ZNYnntQb4kID0DA&zoom=1&iact=hc&vpx=693&vpy=191&dur=850&hovh=190&hovw=265&tx=155&ty=84&sig=110318714666115395229&page=1&tbnh=141&tbnw=183&start=0&ndsp=19&ved=1t:429,r:1,s:0&biw=1280&bih=656
Is the URL of a webpage showing the image, not the image itself.
Make sure you're linking to the actual image itself:
<img src="http://animal.discovery.com/mammals/cheetah/pictures/cheetah-picture.jpg"
alt="Cheetah!" />
if you want to add any url for image you will need to right click on that image and click on copy image address.
and paste that address as url to get image on your webpage
SHARE
When you click share and are logged into facebook, you will see the google image loaded as a thumbnail.
However, all that is specified in the share link is www.google.com and type flicker image.
I did not see any of the "Open Graph Tags" in the page source of google.com ?
Thanks.
EDIT - actually you can remove the type and it still displays an image.
The logo is the only image in that page, so they don't need to specify anything to add it to the sharer.