Please check the following link
http://jsfiddle.net/BbkBf/
I got two questions:
1. why is the background-image not working for the first one (you may say it's a tag is empty, but even then doesn't work).
2. why is the image not shown for the second img tag?
Is it some wordpress problem?
Because the domain in which the image is hosted is protected against hotlinking, meaning they won't let you load the image from their domain unless you are inside their domain. try uploading it to a different domain.
See example: http://jsfiddle.net/BbkBf/3/
Related
can anybody help? thumbnail not showing on my blogger post and showing following error in inspect element : Can't find substitution for tag [post.thumbnailUrl]
I tried my ways but I can't able to succeed.
When the images are hosted externally (aka not uploaded via Blogger editor) and you still want to access them via Blogger data tag, then you will need to use <data:post.firstImageUrl/> in place of <data:post.thumbnailUrl/>.
I tried to create blogger blog and I found that you need to attach image to your post.
Then after it will displayed over there.
Please try to upload picture and let me know it is not working.
Thanks,
Images hosted on different server otherwise blogger host don't be considered in Blog1 widget.
You have to upload image inside post instead of including its source from another host.
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
I am not sure why I can't get an image to show up in the background of this site: http://backroadsbrewing.com/
I have tried using the !important; tag, uploading the photo into the Wordpress' library, and linking within the stylesheet to the URL.
Not sure if you're able to see the code of the site without me putting it up somewhere? If you need me to post it, please let me know.
You are not linking the correct css, you are linking the editing link.
<link rel="stylesheet" href="http://backroadsbrewing.com/wp-admin/theme-editor.php?file=style.css&theme=onesie">
If you open http://backroadsbrewing.com/wp-admin/theme-editor.php?file=style.css&theme=onesie in an inkognito window or after logging out, you get redirected to login page, which is wrong.
You need to link to your generated css file instead of some wp-admin/ url (which will never work).
The correct link would be in your case:
http://backroadsbrewing.com/wp-content/themes/onesie/style.css
Regards, Max
Additionally, you have added an obsolete semicolon:
background-image: url("http://wallpapercave.com/wp/Tb3g7Fv.jpg"); !important;
# instead of
background-image: url("http://wallpapercave.com/wp/Tb3g7Fv.jpg") !important;
And you should:
never link to external pictures (they can always change or being removed)
only link to pictures where you own rights to publish (or it can get really expensive, like a customer of me payed 900€ for a single picture he used for a couple of years.
I have a grid of images on my website, but some of the images randomly don't work. All the image sources are links, which are all generated from the same place. I'll show an example, with an image that works and one that doesn't:
http://codepen.io/anon/pen/mJmaZE
As you can see the second image doesn't work, but if you visit the source link the image is there. Why is this happening?
The second image is missing the http:// part. That means, the browser doesn't know it should look at a different server, but tries to access it at the same server, where the HTML file is hosted.
the content of the src attribute is lacking the prefix http:// . when addint it, it displays the image correctly. otherwise, it interprets the URL as a relative URL in the context of the embedding web page.
The syntax of source URL is wrong.
Current syntax
src="steamcommunity-a.akamaihd.net/xx"
This is a relative path which will point to http://codepen.io/anon/pen/mJmaZE/steamcommunity-a.akamaihd.net/xx
Correct syntax
src="http://steamcommunity-a.akamaihd.net/xx"
which will request the intended CDN url.
I have typed in below code in my page:
var img = new Image();
img.src="abc.jpg"
abc.jpg is a pagecounter which helps me to count the pageview once it is loaded. For this case, I only create the img element, but doesn't add it into DOM.
Is the image downloaded into user's page? Or I must needed to add it into DOM?
Thanks a lot.
================================================================
In order to make the things more clear, here provides a demo page: http://ad3.guruonline.com.hk/mobmax/testing/stackoverflow.html
This page is referencing a JS file "stackoverflow.js":
And for stackoverflow.js, it creates a variable "img" which points to "stackoverflow.jpg"
So, I go back to stackoverflow.html, and view the "network" tab : the most surprising is, stackoverflow.jpg is actually downloaded!
Accoridng to KK's answer, stackoverflow.jpg shouldn't be downloaded, right? Because I never add it to DOM. Can someone provide a explanation on this scenrio?
Thanks!
Update
After going through the revised post ,it appears that the image loads irrespective of whether it is added into the DOM or not. Maybe this is how the Image object works. Another interesting thing is that if you define a normal Javascript Object and add the src url in that object as key value pair i.e.:
img["src"]="http://www.example.com/image/sameple.jpg";
Then in this case there is no loading of image which can be verified by looking at the network tabs. So yes, Image() does loads the src even if the image is added into the DOM or not.
This technique has been used to preload images, which can be found in this link for more details: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/
Good question though!
Without being added to the DOM, it's just a variable and it will be treated like a variable. You will need to add it to the DOM for image to be loaded. If you want to preload the images, you can use a hidden image tag which loads the image. You may refer to this solution for preloading the images: How to Preload Images without Javascript?
You need to add it by creating a Dom node as without it, the element won't be added yo the DOM