I have given absolute path like src="/test.png" all across the application. I have added my base url like href="http://www.w3schools.com/images/" in HTML head section. But since I have used absolute path instead of relative in HTML, the part "/images/" in base url I have given is not appending to the url of the image.
Instead of coming like:
src="http://www.w3schools.com/images/test.png"
^^^^^^
it is coming like:
src="http://www.w3schools.com/test.png".
Is there anyway I can achieve the way I want without going through each and every pages and changing absolute path to relative?
You need to use:
src="test.png"
Without / because / will make it refer to root.
To include the parent's URL(http://www.w3schools.com/images/), use this:
src= "./test.png"
It will then result in
src = "http://www.w3schools.com/images/test.png"
Related
I understand that there are similar questions out there, but none of them seem to work properly for me. I have a slider and an image. When I change the value of the slider, I want the image to change as well. Here are the relevant pieces of javascript:
var imageArray = ['face0.png',
'face1.png',
'face1.png',
'face2.png',
'face2.png',
'face3.png',
'face3.png',
'face4.png',
'face4.png',
'face5.png',
'face5.png'];
function sliderValueChange(value) {
//$('#painScaleImage').attr('src', '~/Content/' + imageArray[value]); ***gets wrong path
//$('#painScaleImage').src('~/Content/' + imageArray[value]); ***jQuery has no method called .src()
//document.getElementById('painScaleImage').src = '~/Content/' + imageArray[value]; ***gets wrong path
//these are commented out because they all failed to work
}
My images are located in my project under Content/face0.png, Content/face1.png, etc. My Views are located in Views/Home/view.cshtml. The problem is that when I called the $(...).attr() and document.getElementById(...).src functions, the browser looked for the images under /Home/~/Content/face0.png instead of looking under Content/face0.png. The reason I assumed I could use ~/Content/face0.png is because if I were to declare the images in html, this would get the image in the right place <img src="~/Content/face0.png" />. How can I properly achieve what I am trying to do? What is going wrong?
Got it, root relative paths were the correct answer for my solution.
(start the path with a /).
I go through many problems regarding this,But couldn't find clear answer.
I have image tag like this
<img src="images/abc.jpg"/>
But when I called in side javascript,
var imgs = document.getElementsByTagName("img");
alert(imgs[0].src);
it shows the src as "http://localhost/myProject/images/abc.jpg"
But I need only get the relative path ("images/abc.jpg")some how.
Some body help me...
You may try to get the element src attribute value, not the src property:
imgs[0].getAttribute("src"); // "images/abc.jpg"
You can use document.location.href to split out the relative path of the image.
This code gives something like ../movies/1.png, the exact src attribute:
$("img").attr("src");
How do I get absolute path of an image with jQuery?
I want to get something like http://site.com/movies/1.png, not ../movies/1.png
This can easily be done by accessing the .src property directly on the <img>:
$('img')[0].src;
example: http://jsfiddle.net/9mKz2/
(I didn't test it on all browser right now)
I have a javascript module which creates a div with a picture of a close button ("X").
This div and javascript are placed in many places on my site.
Relative path solution: When a page includes the javascript, and the javascript uses a relative path for the image. The relative path is relative to the HTML-page. If HTML pages in different paths use this javascript I will need 2 different images.
Absolute path solution: I do not know what server my team-member is using for development (I know for sure that he is not developing on my server). This means that absolute paths will not work.
Is there a simple way of overcoming this problem? Like making the script somehow aware of its path?
Mutable paths (test/staging/production domains) is always a problem in javascript, the best option is to include the root path of your application/website in the HTML. The obvious place to do this is in your template layer. For example:
<body data-root="${rootContext}">
<!-- or whatever syntax your template layer uses -->
And grab it with javascript for usage in your scripts.
var rootContext = document.body.getAttribute("data-root");
Note, you can only do this when the DOM is ready (or when document.body is available, differs cross browser) ;)
An alternative and in my view less pretty option is to simply render javascript.
<script>
var rootContext = ${rootContext} // or whatever syntax your template layer uses.
</script>
At least with the 'data-root' technique, you can store the value wherever you like and avoid a global definition.
So in your code where you reference an image, you can do the following:
img.src = rootContext + "/media/js/close.gif";
Or create a nice helper method:
// lets use a namespace to avoid globals.
var myApp = {
// still need to set this when DOM/body is ready
rootContext: document.body.getAttribute("data-root"),
getContext: function( src ) {
return this.rootContext + src;
}
}
img.src = myApp.getContext( "/media/js/close.gif" );
In the helper method, you can also write some code to ensure proper uses of / and whatnot.
There are three ways to specify a path to an image in html:
Completely relative: <img src="kitten.png"/>
Absolute with regard to the filesystem, but relative to the current server: <img src="/images/kitten.png">
Absolute in all respects: <img src="http://www.foo.com/images/kitten.png">
The second method may work for you.
Can't you just use a CSS class? If it's just a div containing an img, you can get rid of the img and use background-image on the div. Setting this from CSS will make sure that the image path is always relative to the CSS file and will almost certainly work no matter the environment (as long as the other images in your CSS work).
Then, you can just set the className on your div accordingly.
I have a template that gets screenscraped from an outside vendor and need to include absolute paths in the navigation so the externally hosted content will properly link back to our site.
Right now the page/template is driven by a global menu app written by our back end development staff... so anyone who updates our site goes in and changes the menus and their paths...
Right now all of the links are linking to relative paths back to the root.
For example
Home
News
Media
Other
I need a simple way (preferably with jquery) to prepend "http://www.domain.com" to each of those links.
Please note that jQuery object $("a").attr("href") is not equal to $("a").get(0).href ?
$("a").each(function() {
alert(this.href);
$(this).attr("href") = this.href;
});
In you case, this may not help you , because you want static markup, javascript generate dynamic content. But it seems that you want static markup in that case it has to be emit by server.
$('a').attr('href', 'http://www.domain.com'+$(this).attr('href'));
I don't recommend using javascript to solve this issue. This should be solved in the page template. However, if you still want a jquery solution then here you go. Assuming those links have a specific class that distinguish them from internal links:
$('a.external').each(function() {
$(this).attr('href', domain_name + $(this).attr('href'));
})
you don't need jquery for such a simple function....
var elements = document.getElementsByTagName("a");
var eachLink;
for (eachLink in elements) {
var relativeLink = eachLink.href;
var absoluetLink = ["http://",domainName,"relativeLink"];
eachLink.href = absoluteLink.join("");
}
something like this should work, and it runs much faster and you won't need to load the entire jquery library just to run 6 lines of code :P
It's very simple:
$('a').each(function(){$(this).attr('href',this.href);});
When you read the href property of a HTMLAnchorElement, you get the absolute path, so you can overwrite it with attr() method of JQuery.
I noticed that all the solutions here only work with href attributes that begin with a "/" character. If you want something more robust, you may want to try the js-uri library. It looks cool but I haven't tried it myself so I don't know how buggy it is.