img is not loading when change the image by using javascript - javascript

This is my code i can't understand what is wrong with in this.
<html>
<body>
<script type="text/javascript">
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "C:\Users\ashokch\Desktop\light_bulb_off3.jpg";
} else {
image.src = "C:\Users\ashokch\Desktop\bulbon.png";
}
}
</script>
<img id="myImage" onclick="changeImage()"
src="C:\Users\ashokch\Desktop\light_bulb_off3.jpg" width="100" height="180">
<p>Click the light bulb to turn on/off the light</p>
</body>
</html>
Default image is Displaying when page come in browser but when I click the image changing image is not loading


You aren't using valid file protocols (file:///C:/mydir/index.html) to access the files. As others have said, move them "next" to your html file and just use the file name without a path (e.g. light_bulb_off3.jpg), or change your paths to something valid (e.g. file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg)


Try this:
<img src="file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg">
Please notice the file:/// protocol handler. And / (slash) instead off \(backslash).
It is used to show local files in your browser.
But this only works for local files.
If you want the webserver to serve these images, create a folder in your webserver root folder.
Example
/images
And store your images in that folder.
Then point your image src or javascript attribs to the absolute path.
<img src="/images/my-image.jpg">
This will take your current url, strip out the hostname and protocol and append the src.
Example
http://www.example.org/folder/test.html
<img src="{http://www.example.org}/images/my-image.jpg">
<img src="{http://www.example.org/folder/}images/my-image.jpg">
<img src="http://www.some-image-host.com/xyz123.jpg">
Absolute means, with protocol and hostname/path.
Relative means, relative to the root of your current domain (without any path).


Upload your images to a free image hosting website like :-
http://photobucket.com/ or
https://imageshack.com/
Use the new weblinks to the images & check if it works.
"bulbon" ??? What's it ?


Your image path should be relative to your project/code directory instead of the file system. Either copy the images into the project directory or give a relative path. That would solve the issue.

Related

import image with Javascript to jsp

On my JSP I was using:
<img id="sharkgraphic" src="<c:url value="/images/fcs1.svg"></c:url>"/>
otherwise the browser could not find the svg file. Now I want to be able to set the src in javascript.
I tried using:
var sharkurl = require("../images/fcs1.svg");
$( "#sharkgraphic").attr("src",sharkurl);
How would I properly set the source of that img ?

It depends on deployment setup of your application.
c:url without context attribute is resolved to {context of app}/{value}, e.g. if your app deployed to
http://localhost:8080/my-app
then
src='<c:url value="/images/fcs1.svg"/>'
be resolved to
src='/my-app/images/fcs1.svg'
in this case
$("#sharkgraphic").attr("src","/my-app/images/fcs1.svg");
should work fine

node.js express static images serving

I need to include my static images at html page. So I do it like that:
app.use(express.static(path.join(__dirname, 'public')));
And put all my images inside public under '/images' folder.
So then I call it like this:
<img src="images/image_1.jpg"/>
But my path when page loaded looks like:
http://localhost:3000/product/images/image_1.jpg
Why did page url path http://localhost:3000/product/ added before img src?

If you're already at http://localhost:3000/product clicking a link with the href images/image_1.jpg takes you to http://localhost:3000/product/images/image_1.jpg as the URL is relative.
You probably wanted to use absolute paths instead
<img src="/images/image_1.jpg" />

How to go up one level in javascript (when using Ajax.open) [duplicate]

So I'm running this javascript, and everything works fine, except the paths to the background image. It works on my local ASP.NET Dev environment, but it does NOT work when deployed to a server in a virtual directory.
This is in an external .js file, folder structure is
Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg
then this is where the js file is included from
Site/Views/ProductList/Index.aspx
$("#toggle").click(function() {
if (left.width() > 0) {
AnimateNav(left, right, 0);
$(this).css("background", "url('../Images/filters_expand.jpg')");
}
else {
AnimateNav(left, right, 170);
$(this).css("background", "url('../Images/filters_collapse.jpg')");
}
});
I've tried using '/Images/filters_collapse.jpg' and that doesn't work either; however, it seems to work on the server if I use '../../Images/filters_collapse.jpg'.
Basically, I want have the same functionallity as the ASP.NET tilda -- ~.
update
Are paths in external .js files relative to the Page they are included in, or the actual location of the .js file?

JavaScript file paths
When in script, paths are relative to displayed page
to make things easier you can print out a simple js declaration like this and using this variable all across your scripts:
Solution, which was employed on StackOverflow around Feb 2010:
<script type="text/javascript">
var imagePath = 'http://sstatic.net/so/img/';
</script>
If you were visiting this page around 2010 you could just have a look at StackOverflow's html source, you could find this badass one-liner [formatted to 3 lines :) ] in the <head /> section

get the location of your javascript file during run time using jQuery by parsing the DOM for the 'src' attribute that referred it:
var jsFileLocation = $('script[src*=example]').attr('src'); // the js file path
jsFileLocation = jsFileLocation.replace('example.js', ''); // the js folder path
(assuming your javascript file is named 'example.js')

A proper solution is using a css class instead of writing src in js file.
For example instead of using:
$(this).css("background", "url('../Images/filters_collapse.jpg')");
use:
$(this).addClass("xxx");
and in a css file that is loaded in the page write:
.xxx {
background-image:url('../Images/filters_collapse.jpg');
}

Good question.
When in a CSS file, URLs will be relative to the CSS file.
When writing properties using JavaScript, URLs should always be relative to the page (the main resource requested).
There is no tilde functionality built-in in JS that I know of. The usual way would be to define a JavaScript variable specifying the base path:
<script type="text/javascript">
directory_root = "http://www.example.com/resources";
</script>
and to reference that root whenever you assign URLs dynamically.

For the MVC4 app I am working on, I put a script element in _Layout.cshtml and created a global variable for the path required, like so:
<body>
<script>
var templatesPath = "#Url.Content("~/Templates/")";
</script>
<div class="page">
<div id="header">
<span id="title">
</span>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
<span></span>
</div>
</div>

I used pekka's pattern.
I think yet another pattern.
<script src="<% = Url.Content("~/Site/Scripts/myjsfile.js") %>?root=<% = Page.ResolveUrl("~/Site/images") %>">
and parsed querystring in myjsfile.js.
Plugins | jQuery Plugins

Please use the following syntax to enjoy the luxury of asp.net tilda ("~") in javascript
<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>

I found this to work for me.
<script> document.write(unescape('%3Cscript src="' + window.location.protocol + "//" +
window.location.host + "/" + 'js/general.js?ver=2"%3E%3C/script%3E'))</script>
between script tags of course... (I'm not sure why the script tags didn't show up in this post)...

You need to add runat="server" and and to assign an ID for it, then specify the absolute path like this:
<script type="text/javascript" runat="server" id="myID" src="~/js/jquery.jqGrid.js"></script>]
From the codebehind, you can change the src programatically using the ID.

This works well in ASP.NET webforms.
Change the script to
<img src="' + imagePath + 'chevron-large-right-grey.gif" alt="'.....
I have a master page for each directory level and this is in the Page_Init event
Dim vPath As String = ResolveUrl("~/Images/")
Dim SB As New StringBuilder
SB.Append("var imagePath = '" & vPath & "'; ")
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "LoadImagePath", SB.ToString, True)
Now regardless of whether the application is run locally or deployed you get the correct full path
http://localhost:57387/Images/chevron-large-left-blue.png

Having trouble loading a javascript (images don't load)

I downloaded a calendar javascript. My working directory is /user. I put the script into /user/js/calendar. In my HTML located at user/, I have...
<script language="JavaScript" src="js/calendar/calendar_us.js"></script>
<link rel="stylesheet" href="js/calendar/calendar.css">
The .js and .css load, and I see the calendar form, but the images under user/js/calendar/img do not load when it's displayed on the browser.
The image reference code in the downloaded javascript is below
<img src="' + this.a_tpl.imgpath + 'next_year.gif" />
this.a_tpl.imgpath is 'img/'. Is there something I need to add or modify in my HTML or in the .js file to make correct relative reference to the files in user/js/calendar/img?

The image tag is trying to load the image from /user/img/next_year.gif. Either move the images there, or add the path to the code:
<img src="js/calendar/' + this.a_tpl.imgpath + 'next_year.gif" />
Note that image tags will load images relative to where the page was loaded from, while images used in a stylesheet will load images relative to where the style sheet file was loaded from.

You can't put javascript string functions directly in your HTML like this:
<img src="' + this.a_tpl.imgpath + 'next_year.gif" />
You can use a piece of javascript to document.write() the image tag inline or you can create the tag dynamically in javascript and set the .src property using JS after the document has been loaded. But, you can't just throw some javascript into the middle of your HTML like this.
For static definitions of image URLs in an HTML file, the paths should either be relative to the page location or they should be relative to the top of your domain or they should be a fully qualified domain/path.

the releative path in javascript

I meet some problem when locate the resources such as css js img in the page.
For example,I want to use a javascript lib:dtree,it contain some built-in images and css.
This is its structure:
img
dtree.css
dtree.js
example.html
The exmaple.html is a live demo to show how to use dtree. It use the dtree.js as:
<script type="text/javascript" src="dtree.js"></script>
Now I create a new folder,and copy the example.html here,and modify the src of the js:
<script type="text/javascript" src="../dtree.js"></script>
Now,this is the new structure:
img
dtree.css
dtree.js
example.html
chd
--example.html
When I browser the chd/example.html,some required imgs are missing.
And in the dtree.js,there are some codes like:
this.icon = {
root:'img/base.gif',
....
}
So I think the img here are not based on the dtree.js but the current page which call the js.
If so,I think I am fxxked.
I have to put all my pages to the same directory with the img(it contains the required imgs by dtree.js) if I want to use the dtree.js?
And solutions?

you need to adjust image root path by adding slash before img like:
this.icon = {
root:'/img/base.gif',
....
}

Categories

Resources