I'm trying to use the background-image CSS property to set the background of some nodes in a cytoscape-graph.
If I use:
'background-image': 'url(https://cdn3.iconfinder.com/data/icons/computer-system-and-data/512/1-256.png)',
it works perfectly fine.
However, if I use this (the image I actually want to use):
'background-image': 'url(http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png)'
the image does not load.
The difference between these two url's as far as I can see, is that the latter downloads the image instead of displaying it when I enter the image url in my browser.
Using the img-tag works with the latter URL when I'm in just plain HTML, so I'm not sure what's causing this URL not to be usable with the background-image CSS property:
<img src='http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>
This image result is not found. I would recommend some icon hosting website like icons8.com if you would like to import custom icons in your project.
<img src='https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>
So this seemed to be a CORS-error, and I managed to fix it by adding a proxy to my image url. I used https://cors-anywhere.herokuapp.com as my proxy.
So instead of fetching the image from
https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png
I fetch the image from this instead:
https://cors-anywhere.herokuapp.com/https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png
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
I am trying to use a background-image using a "root-relative" path like so : background-image: url("/img/bg.jpg");.
The property is correctly showing in Chrome but the image does not appear. If I change it to be http://localhost:8080/img/bg.jpg it appears.
If I visit http://localhost:8080/img/bg.jpg the image is visible.
If I add a <img style={{width:"100px", height:"100px"}} src="/img/bg.jpg"/> it also appears properly (I am using React).
I browsed SO for a moment and noticed several people having issues with url but none of them was similar.
In case there is any kind of link, I'm using Less with webpack-dev-server. The image is in a static directory.
I finally managed to fix this issue thanks to issue #2248.
I simply disabled the source maps for css-loader and less-loader and that made the trick.
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
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 need add an image to HTML page then I need to send this page via fax.
i can not use the attribute "src" Any ideas how can I do it? Maybe convert the image to byte array and then insert it to the html page?
You can try to use a "data URI".
[EDIT] If you can't use the src attribute, then you're doomed. There are other ways to add an image to a HTML page like using a div with background-image but that image won't make it to the printer (and hence not onto a fax).
Why can you not use the src attribute? Does the fax software somehow internally render the HTML without images and thus ignore it? If that or something similar is the case then you're better off trying to work around it than to try to trick it with some strange byte manipulation.
Can the fax software accept the entire page as one big image? You can add the image to the HTML as you would any other image in a web page, then use something like FireShot for Firefox to capture the entire rendered page into a single image (or split up by pages, etc.) and fax that.