AngualarJS应用程序中部署服务器上的相对路径问题

Question

在我的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"，然后才能正常工作。

因此，如果我不做任何改动，该应用程序正在查看：

  

http://server3/Images/img_1.jpg。

图像真的在

  

http://server3/myproject/Images/img_1.jpg

在我的开发机器上，图像路径显示在

  

http://localhost:61777/Images/img_1.jpg

在服务器上如此清楚地转换为

  

http://server3/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中重新配置应用程序，因为我无法访问它

Answer 1

应用程序从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">，它应该适用于两种环境。