Accessing a photo from another serves using html - html

I found a photo in www.w3schools.com. In that server i can access it by using simple html tag. It's src = "smiley.gif". I want to access the photo in www.practiseboard.com. I have no clue how to do that. Please help.

Right click on the image and copy it URL:
Chrome: Copy image URL
Safari: Copy image address
Firefox: Copy image location
Then use that URL in your img tag.
<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smile">
Demo: https://jsfiddle.net/4v1az6rx/

Use full URL and dont forget http://
if the target site prevents hotlink, you can not display it inside your website.
<img src="http://www.practiseboard.com/smiley.gif">

May be this is what you are looking for!
<img src="http://www.w3schools.com/html/pic_mountain.jpg"; alt="W3Schools.com" />
demo : http://www.practiceboard.com/4fbfc9fc
replace src with full url of the image as Ali said!

Related

Can't display image in HTML

Ok. I can't figure this out. Here's the HTML:
<html>
<body>
<img source="sample.jpg" alt="Wheres my image" style="width:100;height:38">
</body>
</html>
Pretty simple. The picture is just a simple block with some text in it. It's 2k in size. And for some reason I can't attach it here.
Both the image and the HTML are in the same sub directory in my Documents folder (Win10 x64 pro).
When I load the HTML, I just get the text from the "alt" setting for the image.
Browsers I'm testing on:
Chrome: 60.0.3112.113 (Official Build) (64-bit);
IE: Version 11.540.15063.0;
Edge: 40.15063.0.0, EdgeHTML version: 15.15063
Any ideas?
Try using this
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
You are using source insted of src that is causing error so change that. I hope this will work.
Change "source=" to "src=" other than that it should work.
Look here for more...
https://www.w3schools.com/html/html_images.asp
In your style add a unit to the width and height like 'px'. Then replace attribute source to src :)
<html>
<body>
<img src="sample.jpg" alt="Wheres my image" style="width:100px;height:38px">
</body>
</html>
The problem is that you have used the attribute source instead of src for your <img> tag.
Rewrite your image tag as:
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
If the image still won't load for you, there are three possible reasons why this may be happening:
You have forgotten to upload the image to the server.Check it's actually accessible by manually navigating to it.
You have referenced the file incorrectly, either by name or by path.
You need to clear your cache.Hold CTRL and click the refresh icon to clear your image cache.

Email Image not Showing (Gmail)

I've composed an email in HTML that has an image in it.
The image "src" attribute has a URL pointing to a controller action endpoint on my server (ASP.Net) which returns a FileContentResult.
An example of the img tag looks like this:
<img src="https://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
The email displays as expected in Outlook.
If I take the source from Outlook and just view it in Chrome desktop, it still works fine.
If I visit the img URL in Chrome the image is downloaded.
However, if I view the email in Gmail the image does not display. Why might this be the case?
I get a single error in the console looking something like this:
ci6.googleusercontent.com/proxy/<SNIP>https://www.mywebsite.com/controller/action?argument=value GET https://ci6.googleusercontent.com/proxy/<SNIP> 404 ()
Hi you can use this it's work for me
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
Just add http:// in image src
<img src="http://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
First You need to add that image on your deployed project folder and then you need to specify the path of your Image :
<img src="http://www.mywebsite.com/Images/YourImage.png" />
Cheers !!

Show an image when having the URL but not the path

The following link https://www.flickr.com/photos/39420315#N05/26406523594 is the URL of an image. I want to show it by using:
<img src="...">
How may I achieve that?
As simple as that:
<img src="https://www.flickr.com/photos/39420315#N05/26406523594">
The <img> tag expects a URL in the standard form, actually.

image not displaying in webpage, but link to image works

Im building a webpage and have the following code in the page:
<img alt="chat" href="images/chat.jpg">Chat now
The image "chat.jpg" is in the images folder, which is in the same folder as index.html, and if i browse to "localhost/site/images/chat.jpg" it displays but it doesnt show up in the index page at "localhost/site/index.html".
I have tried changing the href to "/site/images/chat.jpg" and the same thing happens.
There is no href attribute for img elements. You are looking for the src attribute.
Validators are useful tools.
This will work for your problem.
<img alt="chat" src="images/chat.jpg">Chat now

Addthis : Different url's for image and on image link click

I am trying to use Addthis widget for my website.Right now I am using the following code to share image to different website.
<script>var addthis_config = {
services_overlay:'facebook,twitter,email,more'
}</script>
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable' src='img_url' addthis:url='img_url' addthis:title='message' />
</a>
</div>
What I want is that when the user clicks the share button for facebook.I need the image preview of the img_url I've mentioned and when this link is successfully shared on facebook I need whoever clicks on this post on facebook, he should be redirected to the main page of my website instead redirecting him to the img_url.
Right now the problem with this code is that it shows me the following share box.
As you can see it is showing me the img_url in the title and description instead of the things I've mentioned above that is the title message.If I change the img_url to the main page of my site then this will not show me the preview of the image I've shared.
I hope I am clear enough. Please let me know for any clearification.
Code Source : http://www.addthis.com/labs/photo-sharing#.USyj-jAyZjY
I was not able to solve the problem so I sent an email to the Addthis support and they said that facebook tries to catch the image preview from the url we mention.So I was not able to accomplish this using the Addthis Plugin.
So I end Up doing it myself by using the facebook.ui dialog to share with the settings I wanted.
I think all you need to do is change the value for addthis:url, so for example, if the site you want them to go to is http://www.supportmyidea.com, then your img tag should look like:
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable'
src='[your_image_url]'
addthis:url='http://www.supportmyidea.com'
addthis:title='Support My Idea' />
</a>
</div>
The image preview that Facebook shows is actually based on the URL you specify. Facebook scrapes that page and will show an image from the page - if you specify an og:image tag, Facebook will use that image. I hope this makes sense.
You don't have to use their format. Make your own image and url using an img tag and an a tag. All the URL has to be is this :
http://www.addthis.com/bookmark.php?url={url}