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

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"> ，它应该可以在两种环境中工作。