Question

我在angular src文件夹中有一个资产/图像文件夹，我将所有图像都留在了那里，我有许多组件和子组件正在使用这些图像，例如2，

我构建了我的有角度的应用程序并将所有文件放置到静态文件夹中，在nginx中，我将其指向要从静态文件夹中加载，在Django的模板中，我使用index.html来加载静态文件，如下所示：现在我的应用程序将运行，但是在角负载中没有地址类似于“ ../../../file”的文件都将得到404：

<img src"../../../assets/image/test.png">

如果我将静态关键字放在地址的前面，例如http://hello.com/bird.65c8b9bce67b6a965a9c.png (error 404) 图片将加载.. 我该如何处理这个问题？

http://hello.com/static/bird.65c8b9bce67b6a965a9c.png

我也加入了

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> site </title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="{% static 'favicon.png' %}">
<link rel="stylesheet" href="{% static 'styles.921a613cd46f44e0d5a0.css' %}"></head>
<body>
  <app-root>Loading .  .  .</app-root>
<script type="text/javascript" src="{% static 'runtime.6afe30102d8fe7337431.js' %}"></script>
<script type="text/javascript" src="{% static 'polyfills.b0205464c9bd4e7fe3b3.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts.59ed76cc23ba77b0ec72.js' %}"></script>
<script type="text/javascript" src="{% static 'main.08947dd689f13d4027ea.js' %}"></script>
</body>
</html>

结束我的urls.py并运行urlpatterns += static(base.STATIC_URL, document_root=base.STATIC_ROOT) + \ static(base.MEDIA_URL, document_root=base.MEDIA_ROOT)

nginx服务器：

python manage.py collectstatic

Answer 1

似乎您在问如何处理带有静态文件的Django的预期行为。您在http://hello.com/bird.65c8b9bce67b6a965a9c.png处收到文件404错误的原因是，该文件在该URL不存在。 Django提供/static/子域或您可以在STATIC_URL中用settings.py定义的一个不同名称的子域中的所有静态文件。

以下是相关文档： https://docs.djangoproject.com/en/2.0/howto/static-files/

Answer 2

最好的解决方案是在window对象中传递静态文件夹url，并通过打字稿进行访问。为窗口对象创建服务。这样，您可以轻松访问应用程序中任何组件中的数据。

此外，请勿在html文件中添加哈希值（对于css和js），因为该值必定会发生变化。在捆绑程序配置中使用false散列。

Answer 3

您的问题是Angular将资源指向Django的根目录。

您需要为resourcesOutputPath命令指定ng bulid参数：

ng build --output-path /path-to-django-app/static --resources-output-path static

因此它将指向http://hello.com/static/bird.65c8b9bce67b6a965a9c.png的{{1}}内字

请注意，资源输出路径是相对于输出路径的。

在此处查看选项部分：https://angular.io/cli/build

Answer 4

一种解决方案是使用Angular的环境变量。

在src / environments下的角度应用程序中，有两个打字稿文件environment.ts和environment.prod.ts。您可以在这些文件中定义变量，这些变量会因开发环境和生产环境而异。

因此您可以将图像源添加为打字稿字符串，例如

<img [src]="imageURL" alt="my_image">

并在TS文件中将imageURL定义为

//environments/environment is replaced with environments/environment.prod on ng build --prod
import { environment } from '../../environments/environment'

//staticURL is '' in environment.ts and '/static/' in environment.prod.ts
imageURL = environment.staticURL + 'assets/images/myimage.png'

您可以了解有关环境变量here

的更多信息

django角负荷静态文件-资产文件夹中的图像获取404

4 个答案: