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

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">

我想保持一切相对。

解：

1. 使用<base href="./">在您的index.html
2. <img src="assets/img/img1.jpg" alt="assets/img/img1.jpg">

我的Web服务器现在将从以下位置获取img： abc.host.com/~user1/myapp/assets/img/img1.jpg

Answer 1

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

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 ='。/'

这对我来说很有帮助。希望能帮助到你。