在我的 Visual Studio 项目中,我具有以下层次结构:
index.html
/Images
/Scripts
/App
/login/login.html
/page1/page1.html
login.html
和 page1.html
是在 index.html 页面上的 ui-view div 内呈现的部分页面。
在login.html和page1.html上,我有一些图像,其路径是通过以下方式指定的:
<img id="img1" src="../../Images/img_1.jpg">
它工作正常,但是当我将应用程序移动到托管它的服务器上时,即使目录结构相同,也找不到图像。
我在服务器上要做的就是将所有路径更改为“Images/img_1.jpg”
,然后它就可以工作了。
因此,如果我不更改任何内容,应用程序将查看:
图像确实在
在我的开发机器上,图像路径显示在
在服务器上如此清晰地翻译为
我尝试通过更改 ng-error (onerror) 中的路径来修复找不到图像的问题:
<img id="img1" src="../../Images/img1.jpg" ng-error="SetPath(this, 'Images/img1.jpg')">
我的 JavaScript
function SetPath(el, path) {
el.src = path;
}
所以我不必手动执行此操作,但它不起作用,JavaScript 不会被调用。
有人可以建议一个有效的修复方法吗?
有一件事是我无法在我的计算机上的 IIS 中重新配置应用程序,因为我无权访问它
最佳答案
该应用程序将图像路径从 index.html
转换为基本路径如下:
在服务器上:http://server3/myproject/../../Images/img_1.jpg
翻译为http://server3/Images/img_1.jpg
在您的开发机器上:http://localhost:61777/../../Images/img_1.jpg
翻译为http://localhost:61777/Images/img_1.jpg
。它之所以有效,是因为您的应用不在子文件夹中。
如果你输入<img id="img1" src="./Images/img1.jpg">
,它应该可以在两种环境中工作。
关于javascript - AngularJS 应用程序中部署服务器上的相对路径问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37188990/