We Keep Coding

Add parts to absolute path

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"

Sharepoint image referencing

I can't seem to find the correct encapsulating or prefix syntax for referencing an image located in xxxx site collection.
Right now I have three variations of one image that will be applied to the footer. And these variants are selected based on the site collection, so I can't directly set the image to the masterpage (Unless I want to make three masterpages, which is just overkill for a single image).
I have tried going about this using Javascript to set the source of an img element and CSS to set the url of a container element's background-image. Both are failing me.
In Javascript, I have tried setting the src attribute of my element to:
"<SharePoint:ProjectProperty Property='SiteUrl' runat='server' />/_catalogs/masterpage/Images/myimage.gif;"
"<% $SPUrl:~sitecollection/_catalogs/masterpage/Images/myimage.gif %>";
"~sitecollection/_catalogs/masterpage/Images/myimage.gif";
and repeated the same with CSS for background-image property to a div element. But all I ever get is errors or it doesn't translate the sharepoint code.
Does anyone have any idea what else I can try?

check these URLs for reference -
http://www.vrdmn.com/2011/08/javascript-lmenubaseurl-varaible-for.html
http://johnliu.net/blog/2012/2/3/sharepoint-javascript-current-page-context-info.html
http://blogbaris.blogspot.com/2013/01/getting-web-url-with-sharepoint-2010.html
and try the below method to get the URL.
<%script type="text/javascript">
var url = "<%= SPContext.Current.Site.Url %>";
</script>
Hope this helps!

Where exactly is this image stored? Is it in the default "Images" library of a publishing site? If so, you've got the wrong path. It would be "/PublishingImages/myimage.gif".

find relative path of a image tag javascript

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.

Relative paths of images in JavaScript

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.

Finding images on page that have a specific filename with jquery

I need to do a check on a page to check if certain images have loaded ie. not returned 404. If they arent available I want to replace the image with a default images.
I am aware I can assign an onerror handler to the images.
Firstly I need to use a selector to find all the images that have a source which contains the following image name -> /folder/Product_1234_P.jpg OR /folder/Product_9876_Q.gif
Any ideas how I can create a high performance selector that I can use to find such images so that I can check if the images loaded, if not replace the image name with: Product_Default_P.jpg or Product_Default_Q.gif
Any help or advice would be great.

You can use the image's error handler and the attribute contains selector like so:
$("img[src*=Product]").error(function() {
$(this).attr('src', 'notfound.jpeg');
});

$('img[src*="substring"]')
It's an attribute selector. Check it out http://api.jquery.com/attribute-contains-selector/

I guess you mean something like
$("img[src^=/folder/Product_][src$=_P.jpg]")
i.e. "Find all img with a src starting with "/folder/Product_" and ending with "_P.jpg".