So I have this site I'm moving from inhouse servers due to the age of the servers. While in the process of moving the site, I noticed that the images have strange strings in the URLs, such as
<img src="/system/images/BAhbBlsHOgZmIiwyMDExLzExLzIyLzEyXzIyXzI3XzkwOV9OZXdzX2Jhbm5lci5qcGc/News-banner.jpg" title="News Banner" alt="News Banner" rel="225x255" width="909" height="303">
<img class="image-align-left" src="/system/images/BAhbB1sHOgZmIjUyMDExLzEyLzIxLzA5XzMzXzQ1XzUzM19XaWxsb3VnaGJ5U3VwcGx5TG9nby5wbmdbCDoGcDoKdGh1bWIiDTExMHgxMTA+/WilloughbySupplyLogo.png" width="83" height="89">
I checked the filestructure, both on the old servers and on the new servers, and those paths do NOT show up anywhere.
It's causing problems where I moving the sites to, shown in the fact that the images don't show up at all. At first, I thought installing ImageMagick would fix it, and for one of the three sites, it did, but the other two sites still have VERY broken images.
Can someone explain why the images have such weird strings in the URLs, and how I can fix it?
These URLs are from Dragonfly which is the Image processing library that Refinery uses.
What this URL does is encode job instructions for how to process the image that you are requesting. These instructions can be many things such as resize, crop, watermark, distort in some way. This means that you can request the same image with different instructions and it will appear differently each time.
For more information the Dragonfly URL documentation is a good read
I get the same thing with my refinery sites. It appears Refinery (or imagemagick, or one of the other gems it depends on) generates temporary URLs for assets/resources. This is usually a good thing as it helps prevent leeching and hotlinking, among other things :)
Related
I'm developing a page that uses an image from a Networked File System.
The HTML is:
<img src='file://192.168.1.25/dir/subdir/fname.jpg'/>
and the image does not display.
However when I put
file://192.168.1.25/dir/subdir/fname.jpg
directly in the Navigation Bar the image displays with no problem.
I've already researched the problem and saw a lot of answers about slashes (the number of them and type - forward or backward) and also some bizarre suggestions but no definitive answer that works. I'm sure there must be a very simple solution. If I can display the image perfectly from the Nav Bar, I can't see any reason why the img src= would behave differently (but then browser developers may be strange beasts and they certainly all do it a different way).
I suppose that an http://... link in the src= would work fine but I was trying to avoid mounting a Web Server on the source machine just for this purpose as the Web App is destined to be an internal web where all the authorized users will have access to the Networked File share and the source machine is destined to be in an externally available environment with various daemons handling all external client communications and other tasks.
I'm testing with Chrome right now and have not tried it on other browsers but I really need a portable solution that would work on MOST if not ALL HTML5 browsers.
Thanks in advance for any insights.
I have a one-page static website. My website is displaying different images than those referenced in the HTML. For example:
<img src="img/About_Us_Graphic.png" alt="About us photo" id="aboutUsPic" style="margin: auto;">
Will be sometimes displayed as the image that's actually
<img src="img/Facebook_icon.png">
This happens pretty much randomly. Sometimes the pictures are correct, sometimes they're totally different pictures. And when it's a wrong picture, it isn't consistently the same wrong picture. What causes this? How can I fix it?
My site uses Foundation 5 (not sure if that's relevant). Thanks!
I've found situations similar to the one you described to be the symptom of one of a few causes:
Someone is tinkering with the content on the site without you being aware. Ask your team members if they know of anyone who might do this.
Your client-side cache is taking over. To remedy this specific problem, go to your browser and clear out the temporary files. Sometimes you have to also clear out cookies and other historical items.
Client-side proxies. Sometimes proxy servers store caches of what they serve to reduce the load of their requests. When they work in a round-robin fashion, different servers within the proxy circle might have mismatched content. * https://en.wikipedia.org/wiki/Load_balancing_(computing)
Load-balanced web servers. I've seen some situations where servers that are load balancing content will hold onto data. In my specific scenario, a memcache was used and would seemingly hold onto content until its index was refreshed.
Without more information about your set-up, there's not much anyone can do. As oxguy3 suggested - there could even be something in your code causing this.
Please try typing the URL of the image directly in your browser and see if it consistantly comes up the same, then try the same url with "?someArbitraryText" after it where "someArbitraryText" is just some random characters.
E.G. instead of "http://my.server.com/img/About_Us_Graphic.png", use "http://my.server.com/img/About_Us_Graphic.png?arbitrary". Most servers that I've encountered will still serve the image, but if a load balancer, proxy, or memcache is involved it will consider this a different URL and load it from the source rather than from some cached file.
I've seen some cases (such as on salesforce clouds) where doing so will bring up different results.
Let us know what you discover. Any little clue could help someone identify and determine the root cause.
I've made a website which displays images hosted on other sites using the html src="http://......" tag, however sometimes some of the images won't load. This appears somewhat random, and I don't think it is a problem with the links themselves.
I display a lot of images, so I am wondering if this is a common problem when trying to load many thumbnails from another site. Is the best solution to host all the thumbnails on my own server, and if so, is there an efficient way to do this (so I don't have to manually download and link to every image)?
Thanks
Is way better to host it on your own server.
Because if are all from other servers, you must connect to all servers and download it.
It causes worse response and increase the time required to load the page.
To the image and links downloading - I think it is possible, just go on google and try to find some advanced html page downloader. I had one and it worked directly the way you want. - can't remember the name..
(also sorry for my bad English)
I'm developer of Construct 2, a HTML5 game editor for Windows. It's at http://www.scirra.com.
Recently I've been trying to add a feature that will modify an image by transforming it on a canvas. It's pretty straightforward - draw an Image to the canvas and call getImageData() to get the pixels.
When the user clicks 'preview' in our application, all the files are dumped to a temp file on disk and a browser launched to show it. Uploading to a server is not an option for previewing - some games are megabytes big.
However most browsers block you using getImageData() to get the pixels of any image loaded from disk at all. I've tried putting all the necessary image files in subdirectories as MDN suggests in its description of file:// access policies. That doesn't work either!
Chrome's --allow-file-access-from-files flag fixes it. However, I need to support all major browsers. Is there a similar workaround for at least Internet Explorer and Firefox? I have no idea about Internet Explorer, and I really wish there's something which doesn't involve manually going to about:config in Firefox, otherwise we will be deluged in support requests asking "why doesn't it work in Firefox?!".
Also, why on earth is this security policy necessary?!? It seems way over the top and makes applications like ours really difficult to write.
Any help appreciated.
Your name sounds familiar from HN.
This is pretty laid out in stone in the spec by now, though this upsets an awful lot of people. http:// and file:// are different origins, and anything that tries to put one on the other will dirty the origin. As you noted file uri's themselves have their own set of rules that make things even trickier.
Drawing something to a canvas whose origin is not the same? Too bad, the origin-clean flag henceforth is false, which then disallows you from doing various things.
A complete list of those things is located in the spec here.
But I'm sure you know all this by now. You want to get around it.
I'd suggest ins instead of trying to strong-arm the browsers around it, you bundle in some kind of lightweight web service so that things are all appearing from the same origin. It will cause a lot fewer headaches in the future.
You'll probably want something like the Python SimpleHTTPServer. But that decision really depends on what you've already got included in your product already at this point.
I started working with HTML5 Canvas and Video and I keep having this problem: I try demos and experiments but I can't view them unless I upload them to my web server. At the moment this doesn't pose a huge problem because I'm working with comparatively small files, but I'm actually preparing a bigger project, and this problem would become quite inconvenient very quickly. And also I would just like to get my facts straight. I have been working with both, my own created videos and those from demos. I worked with videos I encoded ages ago and I worked with videos I encoded a minute before using them in my code. It's always the same result, using the HTML5 Video container works, using video inside Canvas doesn't, Canvas just doesn't display any video (unless, like I mentioned, I upload them to a server).
This is the information I found so far:
http://html5doctor.com/video-canvas-magic/
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements
(and a little bit of information on w3, but I'm not allowed to post more than two links)
From what I understand, my canvas must be tainted and my files don't appear to be 'origin-clean', but this is all I have been able to figure out. I don't understand why.
Does anybody know more about this and can explain how and why this works?
There's a strict separation within browsers between anything loaded from http:// and anything loaded from a file:// URI. This is actually pretty sensible, otherwise random pages you loaded from the web would be able read files off your harddrive. There are several additional restrictions that apply to file:// URIs themselves, again these are aimed at not letting files you've downloaded from the web having free run of your harddrive.
Having said all that, if your HTML file and the videos are all sitting in the same directory on your harddrive then everything should still work as all these conditions should be met.
If you're still having problems, one useful approach for local development is to use a lightweight web server. Personally I use Python's SimpleHTTPServer because it was already installed on my machine, but there are many others - often web development frameworks (eg. Ruby on Rails) come with them built in.