I have two image descriptions in HTML on my local PC:
<IMG src="url('myimage.png')"></IMG> <!-- this I call "explicit" -->
<IMG src='myimage.png'></IMG> <BR>
Neither Mozilla, nor IE do show the first image. Naturally, I tried to interchange apostrophes or omit apostrophes and so on...
Why don't browsers seem to see an image described by the 'url' keyword?
You can only specify an image using a relative or an absolute URL. The url keyword is used in CSS to express an image location.
Refer to http://www.w3schools.com/tags/att_img_src.asp for more info on the img src attribute.
Some working examples:
Relative url, can only be used if the html file in on the same dir:
<IMG src="myimage.png"></IMG>
Relative url #2, can only be used if myimage.png is on dir images inside the same dir as the html file :
<IMG src="images/myimage.png"></IMG>
Absolute url - can be used from anywhere
<IMG src="http://something.com/images/myimage.png"></IMG>
The same as the above, without including the website, must be used inside domain something.com
<IMG src="/images/myimage.png"></IMG>
Related
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 !!
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!
Im trying to set up a hyperlink from my current page to another page via my files, however it doesn't work...
My code:
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html"><input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
<!-- Thats in context, the HREF is following-->
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
Once i click the hyperlink it comes up with an error that repeats the directory:
file:///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/file///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/Index/Languages.html
How can i fix this?
First of all, the tag in conjunction with the href attribute work as follows <a href="path/to/file.html">. Noticed the difference (space)?
Secondly, if the file is in the same folder, all you need to do is reference the file that you want to link starting from that path and upwards.
You were on the right track, your href would become: {}
Consider naming files with lowercase letters only. Its not necessary, but a well accepted practice!
The <a> must have a space between the a and href: <a href="">
When you use the href attribute, the path will be based on which file you put the <a> in, e.g. if you put the <a> in the index.html, and you want to reference to languages.html, first make sure that the languages.html is in the same folder as index.html (easier) and then just reference to it with:
<a href="languages.html">
Also, why are you using an input tag? Just use an img tag. I'll fix your code:
<a href="languages.html">
<img id="Languages" style="position: absolute; height:_px; width:_px;" src="CSImages/About.PNG">
</a>
This only works if the folder CSImages is in the same directory as index.html If not, just change the path accordingly.
Hope this helps!
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
</a>
As mentioned in comments, you should put a space between a and href. Additionally, you should close the a tag.
Why are you using an input element for showing an image? Maybe you are better off with an actual image tag:
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img id="Languages" style="position:absolute; height:[insert missing value]px; width:[insert missing value]px;" src="./CSImages/About.PNG">
</a>
You may also have a look at this SO question for more reference on links to local files: How can I create a link to a local file on a locally-run web page?
Add the space in the a href, put the image in an img tag, and don't include height and width unless you are going to include a value. Also position:absolute has to go in a style tag. Finally, close your a tag.
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img src="./CSImages/About.PNG" style="position:absolute">
</a>
I'm trying to display an image with the tag and referencing an image in subfolders, but it doesn't work, it only works when the image is in the same folder as the script file.
Here is my code:
<img src = "SubFolder\SubSubFolder\plant.png"/>
Try <img src="SubFolder/SubSubFolder/plant.png" />
HTML uses forward slashes (/), not backwards ones (\).
If this doesn't work, it would also benefit to check that the image at SubFolder/SubSubFolder/plant.png actually exists.
<img src="your path here " alt="alter text " height="42" width="42">
this will help and make sure the path should not have space
one more thing that whether file is in same folder or not start giving path from root /mainfolder/sup/../file.png that would always work
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;