Question

我是Angular的新手。我用2张图片创建了一个小型Web应用程序。图像位于myapp/src/assets/img1.jpg。在我的本地机器上，一切正常。当我调用locasthost：4200时，我可以看到图像，但是当我将dist文件夹（使用ng build --prod创建）的内容上传到我的Web服务器时，无法找到图像。

我的网络服务器：abc.host.com/~user1/myapp

路径的部分（myapp）被切断。例如abc.host.com/~user1/assets/img1.jpg。

我应该使用<base href="">什么？使用什么img src路径以便在Web服务器上显示图像？以下不起作用：

<img src="/assets/img/img1.jpg" alt="/assets/img/img1.jpg">
<img src="../assets/img/img1.jpg" alt="../assets/img/img1.jpg">

我想保持一切相对。

解决方案：

在index.html中使用<base href="./">
<img src="assets/img/img1.jpg" alt="assets/img/img1.jpg">

我的网络服务器现在将从abc.host.com/~user1/myapp/assets/img/img1.jpg

Answer 1

这完全取决于您在 index.html 中提供的 base href 。所有图片都应保存在'assets'文件夹下。并且项目中任何图像的路径必须是相对的，从此文件夹开始，即

SRC =的 “资产/ IMG / img1.jpg” 的

执行此操作时，将删除找不到文件的难度，这将在部署应用程序时出现。

现在，这些步骤将完成其余的工作。

ng build --prod - base-href / myApp - 此命令将添加 base-href ='/ myApp'指向index.html

在服务器的部署文件夹中创建文件夹myApp，比如tomcat 在webapps中创建此文件夹。

将dist文件夹的内容复制到此myApp文件夹。

运行服务器。

可以在http://localhost:8080/my_app
访问申请表
如果你不想为你的应用程序使用上下文'myApp'，那么尝试 base href ='。/'

这对我的情况有帮助。希望，它有所帮助。

Answer 2

这取决于您的html文件的存在位置。根据您的数据，可能有三种可能性：

<img src="src/assets/img/img1.jpg" alt="My image"/>
<img src="assets/img/img1.jpg" alt="My image"/>
<img src="img/img1.jpg" alt="My image"/>

Answer 3

我应该使用<base href="">什么？

取决于您的配置，但一般来说，它应指向您的应用入口点。因此，如果您的应用可以使用example.com，则基本href将为/

如果您的应用在exampl.com/some/path下可用，则基本href应该与/some/path/

相似

Answer 4

通过添加两组图像来传递

。

<img src="assets/image/tlsTitle16.gif"  onerror="this.onerror=null;this.src='ProjectName/assets/image/tlsTitle16.gif';" />

在Web服务器上的资产中的图像的角度路径

4 个答案: