Question

我正在尝试在Django 2.1中运行Angular 6应用程序。我能够运行该应用程序并获取网页。但是，资产文件夹中的所有图像均未在UI中呈现。它返回404 Not Found。

我的index.html如下所示

{% load staticfiles %}
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>testApp</title>
<base href="/">

<link rel="stylesheet" href="{% static 'assets/bootstrap.min.css' %}">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href=" http://www.dafont.com/bebas-kai.font" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="{% static 'assets/bootstrap.min.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" href="{% static 'styles.840582ccf500d5b2f900.css' %}"></head>

<body>
<app-root></app-root>
 <script type="text/javascript" src="{% static 'runtime.a66f828dca56eeb90e02.js' %}"></script>
 <script type="text/javascript" src="{% static 'polyfills.d391358819e34c4d58a8.js' %}"></script>
 <script type="text/javascript" src="{% static 'main.ebdb44550f1a4dd60a03.js' %}"></script>

</html>

settings.py就是这样

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = '***********************************'

DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'first'
 ]

MIDDLEWARE = [
  'django.middleware.security.SecurityMiddleware',
  'django.contrib.sessions.middleware.SessionMiddleware',
  'django.middleware.common.CommonMiddleware',
  'django.middleware.csrf.CsrfViewMiddleware',
  'django.contrib.auth.middleware.AuthenticationMiddleware',
  'django.contrib.messages.middleware.MessageMiddleware',
  'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'helloapp.urls'

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
      },
  },
]

WSGI_APPLICATION = 'helloapp.wsgi.application'

# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
   'default': {
    'ENGINE': 'django.db.backends.sqlite3',
    'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
 }
}


# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password- 
validators

AUTH_PASSWORD_VALIDATORS = [
{
    'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
    'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
    'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
    'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]


LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

那么我是错过了什么还是做错了什么？

Answer 1

在settings.py中，您指定静态文件在static目录中

STATIC_URL = '/static/'

浏览器错误日志显示您正在尝试请求图像而未添加路径的 static 部分。

因此，文件必须以/static/开头

例如：

/static/assets/imgs/huge_logo.jpg

如何在Django框架中运行Angular的情况下在Assets文件夹中加载图像？

1 个答案: