I have a div tag.
<div class="imsSummaryItem" id="imagesPreview">
</div>
<asp:Image ImageUrl="C:\Users\John\Desktop\TempFolder\16.jpg" runat="server" /> --not showing up as well.
In my javascript:
<script type="text/javascript">
function loadImages() {
$('#imagesPreview').append('<img src="C:\\Users\\John\\Desktop\\TempFolder\\16.jpg" />');
}
</script>
I am ending up with a hollow image. I dont see it. Just like an icon but its empty.I hope you understand what I mean. When I check the image properties it says 16.jpg and remaining all values are Not Available. What is wrong here?
I think image you are trying to show is not in web application folder / virtual directory.
Move image to your web application folder and then specify the relative or an absolute URL in ImageUrl property.
If you dont want to move images to your web folder then your only choice is to write HttpHandler which will read images from specified folder and transmit it to the client. This will also require some specific permissions for your web app IIS user to access some folder outside the web app scope.
I think escape sequence is not correct that is why it not able to reach that path.
try this: double backslash before forward slash ... SO is not allowing me to write it properly, it is omitting one back slash. i hope you got my point
"C:\\\/Users\\\/John\\\/Desktop\\\/TempFolder\\\/16.jpg"
Always try to have the images you need inside your solution.
Just copy the image from temp folder and have it inside the resources
Like have the image in Resources/Images folder so that you can refer it as
$('#imagesPreview').append('<img src="../Resources/Images/16.jpg" alt="text" />
Related
I use ajax to load html files when the links on my page are clicked. Here is the simplified version of what's going on:
links.click(function () {
var href = $(this).attr("href");
history.pushState(null, null, href);
$.get($(this).attr("href"), function(data){
$("#page").html(data)
})
});
This works fine. However, the loaded .html files contain a lot of images with relative paths, as follows:
<img src="smiley.gif">
Therefore, when the files are loaded, the text of the page is okay but none of the relative content is being loaded properly. Creating my images with absolute paths solve my problem however I need them to be relative for my current case.
As you've noticed I've modified the address bar by using history.pushstate in my click event function. I assumed that the loaded url would load all of the resources properly as the url is also modified. However, it's not working like that with the code above.
What can I do to fix this issue in an elegant and simple way?
What you want is to insert a base tag in your resulting html, to specify where to root of all relative paths should be at.
So lets say that all your relative paths should be served from /assets and you load /user/1/profile, a relative image with: <img src="nyan.gif" /> would be checked at /user/1/profile/nyan.gif and will be returned invalid. If you however insert a <base href="/assets"> in the head tag, the image will be served correctly
It's not clear to see what the URL you are on, which is ultimately going to affect how your page reacts.
For instance if you are on a page that looks like www.example.com/products and you try to load smiley.gif that's going to end up being www.example.com/smiley.gif.
If instead you are on www.example.com/products/ (NOTE: trailing slash) or www.example.com/products/index.html however, smiley.gif would point to www.example.com/products/smiley.gif. You don't know what URL the user is going to type in, but you could:
update your links to include the final slash to mitigate this, and
forward the user to a location with the trailing slash if they type it in incorrectly.
One slash on the end of your URL may be all that you need to fix this but... you may want to consider putting all your asset files into one directory so you don't have to play this game at all! /images/smiley.gif could end up being easier for you in this case.
I'm trying to make a little website browsable both online and offline using only html, css and a little of jquery\javascript.
Hence I'm using all relative paths and everything works fine unless I came to the issue to load a custom menu in all my pages with a little smart jquery include.
However since my menu.html is loaded in different pages located in different subdirectories of the tree structure I am wondering what's the smartest way to write down the href links of the different voices in the menu.
I initially started using all absolute paths in the menu.html, but of course it just works only online or offline based on which root domain I use in the absolutes paths (either http://mywebsite.com/ or file:///D:myfolder/etc).
Of course also using the / at the beginning of a link works only online, since locally the / stands for the drive letter where the websites' folder is placed and it will work if and only if the website's folder is saved in the highest path like as D:/myWenbsite. I'd like to make something more adaptable regardless of the local path.
The best way in my opinion is to use relative URL's from the root. For example in your menu.html file when you reference jquery you can do the following:
/javascript/jquery.min.js
Adding the beginning '/' makes it so that the path always starts from the root of the domain no matter where your html is at in your directory.
If you used:
javascript/jquery.min.js
That means in whatever directory your menu.html file is in, a folder for javascript would also need to exist and that is not generally wanted.
Using the <base> command within a little script to change it solved my issue.
Here is an example:
<head>
<!-- Here a direct path is need to firstly load jquery -->
<script type = "text/javascript" src = "../include/js/jquery-1.10.2.min.js"></script>
<base id="host" href="" />
<script>
/* Where am I? */
here = window.location.href;
hereIndex = here.indexOf('temp-test');
/* make substring from root till temp-test/ */
newPathname = here.substring(0, hereIndex+10); //+10 to consdier also temp-test/
$("#host").attr("href", newPathname);
</script>
</head>
Don't know if there is a better way to do it.
Anyway even if the page renders correctly in the console log I still get errors on every relative path I have GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND however for instance, this image is instead properly loaded. So what's up here with the base tag? It is kinda of not getting recognized but it works..
Further investigation is needed for me.
I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.
I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.
However this is not working. I have copied the link to the image for example:
https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg
Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />
All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />
If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?
Well no sooner had I posted this question, the answer came up!
On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.
It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:
https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg
Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!
i have problem this is javascript function its dont show the image in background.
document.getElementById(showtag).className='loadings';
and this is class property in css i think the problem is in url path.loading.gif is in images folder.
.loadings
{
height:50px;
padding-left:15em;
background-image:url('images/loading.gif');
background-repeat:no-repeat;
background-position:center;
}
The problem is most likely that you have a directory structure like:
/css/style.css
/images/loading.gif
so your CSS is pointing to
/css/images/style.css
If so, add a / to the front of the URL.
You'll have to use the right path for the gif.
Now let's say your css loads from the path /style, and the image you look for is stored in the path /img/backgroundimages, then the background-image url could be url(../img/backgroundimages/loading.gif) or url(/img/backgroundimages/loading.gif). In other words, use a relative path originating from the path your css-file is stored, or use the absolute path from the server root (prefixing the url with /).
Assuming the variable showtag contains the id of an element that already exists on the page, your code should work.
So things to look at:
Does showtag have the correct value? (Check it by single-stepping the code in a debugger; in 2011, there's no excuse for not using debuggers for client-side code.)
Does the element exist when the code runs? Or is it added later? If it's added later, you will want to schedule your code to run later (by putting your script element at the end of the page, just before the closing </body> element, or by using window.onload or whatever "loaded" or "ready" event is provided by your library, if you're using one).
What happens if you manually add a div with that class to the page? Do the styles from the class get applied correctly? If not, you know you have a CSS/HTML problem, not a JavaScript problem. The developer tools in most browsers (see point 1 above) will help you figure out what the CSS problem is as well — for instance, by showing you that the image request is a 404 if the path to the image is incorrect.
If I put in the src attribute ./images/nothing.gif what does that translate to?
I have a javascript file that makes src attribute of some html element to 'nothing.gif'
but on the page nothing.gif shows as 'file not found' symbol.
Currently nothing.gif resides at the following place in my ftp server:
/www/foldername/wp-content/themes/themeg/images/nothing.gif
the javascript resides at:
/www/darksnippets/wp-content/themes/themeg/javascript.js
since this is wordpress there is no actual 'html page' the content is stored in the DB. so If I used ../ where should I place nothing.gif?
Edit:
here is the link to the page: http://www.darksnippets.com/?page_id=56
nothing.gif can be found here: http://www.darksnippets.com/wp-content/uploads/nothing.gif
in the bottom right you will see broken image symbol (this shows up in IE of Chrome. does not show in FF)
The relative path ./images/nothing.gif is interpreted by the browser, not the server. So it will look at the url from the browser's perspective to resolve the path. What is the url that the browser sees?
Update:
I see you've provided URLs. Change your relative path to:
./wp-content/uploads/nothing.gif
But a better solution would be to use a root relative path. i.e. one that starts with a /
If the HTML page is http://www.darksnippets.com/?page%5Fid=56 then nothing.gif points to http://www.darksnippets.com/nothing.gif. The location of the Javascript is not relevant. So you should just need "wp-content/uploads/nothing.gif".
One of the ideas is to use a full path to the image file
e.g. http://www.yourdomain.com/images/nothing.gif
Not having worked with wp very much, I can't give a specific answer, but a general solution would to be to use the format "http://www.sitename.com/folder/nothing.gif" Where, of course, sitename.com/folder gets replaced with your domain name and the folder on your site.
If you're writing a Wordpress template in PHP, you can access the full path to your template directory with:
bloginfo('template_directory')
Alternatively, if you can set the images as background images via CSS (instead of using src), relative image paths defined in CSS will be relative to the CSS path:
.nothing { background: url(images/nothing.gif); }
As I thought, in IE and Firefox the browser is looking for http://www.darksnippets.com/images/nothing.gif. The relative URL is relative to www.darksnippets.com (the url of the page), not to the javascript's location.
Ates Goral's answer is correct. I'll expand to address other questions you raised.
In relative paths, . (single dot) refers to the current path. This will generally be the path of the page loaded (and resolved according to the rules of your web server), unless your page uses a <base href="..."> which is different from your current path. This is because every page loaded has a base path, which defaults to... you guessed it, . (single dot). Likewise, .. (two dots) refers to the parent directory of the current path (also resolved according to rules on your web server).
For this problem you can simply remove the dot(.) and / sign from your code
So now your code will be like
src = images/nothing.gif
I think this will work for you.