If the image files are in the same folder as the webpage, then you do not need a path in the HTML nor JavaScript. Just refer to the files by full name, like “right_arrow.jpg”.
If the image files are in a sub-folder of the webpage’s folder, just prepend the filename with the subfolder name, like “images/right_arrow.jpg”.
If the image files are in a sub-folder of the webpage’s parent folder, just prepend the filename with the relative pathname, like “…/images/right_arrow.jpg”.
If you really wish to use a base path in your html page, use the <BASE> element within the <HEAD> element.
Remarks
When used, the base element must appear within the head of the document, before any elements that refer to an external source.
If more than one base element occurs, only the first element will be recognized.
<base>: The Document Base URL element - HTML: HyperText Markup Language | MDN
Example:
<!DOCTYPE html>
<html>
<head>
<base href="http://msdn.microsoft.com/workshop/author/dhtml/reference/"/>
</head>
<body>
Click <a href="properties/href_2.asp">here</a> to learn about the href property.
</body>
</html>
Better to use the File class method:
File::dirname(img_file_path)