In my Visual Studio project I have the following hierarchy:
index.html
/Images
/Scripts
/App
/login/login.html
/page1/page1.html
login.html and page1.html are partial pages that are rendered inside a ui-view div on index.html page.
On both login.html and page1.html I have some images to which the path is specified in the following way:
<img id="img1" src="../../Images/img_1.jpg">
It works fine, but when I move the application on the server where I am hosting it, the image is not found even though directory structure is the same.
What i have to do on the server is to change all paths to "Images/img_1.jpg", then it works.
So if I do not change anything, the app is looking at:
And the image is really in
On my dev machine the image path shows up at
so clearly on the server it translates to
I have tried fixing an issue of image not being found by changing the path in ng-error (onerror):
<img id="img1" src="../../Images/img1.jpg" ng-error="SetPath(this, 'Images/img1.jpg')">
my javascript
function SetPath(el, path) {
el.src = path;
}
So I would not have to do that manually, but it does not work, the javascript does not get called.
Can anyone suggest a fix that works?
One thing is I cannot reconfigure app in IIS on my machine as I do not have access to it
The app translates image path from index.html base path so :
On server : http://server3/myproject/../../Images/img_1.jpg is translated to http://server3/Images/img_1.jpg
On your dev machine : http://localhost:61777/../../Images/img_1.jpg is translated to http://localhost:61777/Images/img_1.jpg. It works because your app isn't in a subfolder.
If you put <img id="img1" src="./Images/img1.jpg">, it should work in both environments.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments