Django-部署后只有一些静态图像未显示在网页上

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。 user8714896正在寻找此问题的更详细的答案。

所以我在设置下设置了我的静态URL：

settings.py

STATIC_URL = '/static/'


if DEBUG or not DEBUG:
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'tabular', 'templates'),
        os.path.join(BASE_DIR, 'common'),
    )

然后是我的包含静态文件的文件夹路径

我有一个包含logo.png和step1.png-step4.png的网页。由于某些奇怪的原因，当我在部署中运行时，它可以正确提取logo.png，而不是step1.png-step4.png。

这里是html代码。

<div id="wrapper">
  <div id="container">
    <img style="padding: 1em;" src="{% static 'images/logo.png' %}" />
    <form
      class="form-horizontal"
      enctype="multipart/form-data"
      id="data_upload"
      method="POST"
    >
      {% csrf_token %}
      <div class="input-group mb-3">
        <div class="custom-file">
          <input
            accept=".csv"
            class="custom-file-input"
            id="file_input"
            name="file"
            type="file"
          />
          <label
            aria-describedby="inputGroupFileAddon02"
            class="custom-file-label"
            for="inputGroupFile02"
            id="submit_label"
            >Upload CSV</label
          >
        </div>
        <div class="input-group-append">
          <button
            class="input-group-text btn"
            id="upload_button"
            type="submit"
            disabled
          >
            Upload
          </button>
        </div>
      </div>
      <div id="progress_div" class="progress" style="visibility: hidden;">
        <div
          id="progress_bar"
          class="progress-bar"
          role="progressbar"
          style="width: 0%;"
          aria-valuenow="25"
          aria-valuemin="0"
          aria-valuemax="100"
        ></div>
      </div>
      <br />
      <div
        id="spinner"
        class="d-flex justify-content-center"
        style="visibility: hidden;"
      >
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </form>
  </div>
</div>

<div
  class="modal fade"
  id="my_modal"
  tabindex="-1"
  role="dialog"
  data-target="#my_modal"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_title">Modal title</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="modal_body" class="modal-body"></div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="how_to_modal"
  tabindex="-1"
  role="dialog"
  data-target="#how_to_modal"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_title">How To</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div
          id="carouselExampleCaptions"
          class="carousel slide"
          data-ride="carousel"
        >
          <ol class="carousel-indicators" style="color: black;">
            <li
              data-target="#carouselExampleCaptions"
              data-slide-to="0"
              class="active"
            ></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img
                src="{% static 'imgs/step1.png' %}"
                class="d-block w-100"
                alt="..."
              />
            </div>
            <div class="carousel-item">
              <img
                src="{% static 'imgs/step2.png' %}"
                class="d-block w-100"
                alt="..."
              />
            </div>
            <div class="carousel-item">
              <img
                src="{% static 'imgs/step3.png' %}"
                class="d-block w-100"
                alt="..."
              />
            </div>
            <div class="carousel-item">
              <img
                src="{% static 'imgs/step4.png' %}"
                class="d-block w-100"
                alt="..."
              />
            </div>
          </div>
          <a
            class="carousel-control-prev"
            href="#carouselExampleCaptions"
            role="button"
            data-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a
            class="carousel-control-next"
            href="#carouselExampleCaptions"
            role="button"
            data-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

问题这是控制台在Google Chrome开发器中打印的内容

GET https://blackboxml.cs.ubc.ca/static/imgs/step1.png 404 (Not Found)   
GET https://blackboxml.cs.ubc.ca/static/imgs/step2.png 404 (Not Found)  
GET https://blackboxml.cs.ubc.ca/static/imgs/step3.png 404 (Not Found)  
GET https://blackboxml.cs.ubc.ca/static/imgs/step4.png 404 (Not Found)  

当我在调试模式下在个人窗口上运行此程序时，图像会正确显示。另外一件奇怪的事情是html的css在同一个文件夹中，但是可以正确加载，但不能正确加载png。

ls -l

-rw-r----- 1 virtuecc fwood 52176 Jun  4 16:27 step1.png
-rw-r----- 1 virtuecc fwood 32364 Jun  4 16:27 step2.png
-rw-r----- 1 virtuecc fwood 38267 Jun  4 16:27 step3.png
-rw-r----- 1 virtuecc fwood 49833 Jun  4 16:27 step4.png

其他文件

-rw-r----- 1 virtuecc fwood 9727 May 28 15:30 logo.png

我尝试过的 -我将所有png放在同一文件夹“ common / images”中，但仍然仅成功提取了logo.png。 -我还被告知运行命令“ python manage.py collectstatic”应该可以解决此问题。我得到了“ https://www.youtube.com/watch?v=m0zEz_qdPLY”

的提示

规格 -Web服务器是Ubuntu -Django 3.0.7 -Python 3.6.9

有人能告诉我为什么会这样吗？最终目标是在部署期间将静态信息提供给网站，如果有更好的方法可以做到这一点，我也欢迎提出建议。

Answer 1

问题：

您的django.contrib.staticfiles应用仅在DEBUG模式下工作。

用于提供静态文件shown here的另一种开发方法也仅在DEBUG模式下有效。

注：此帮助功能仅在调试模式下且仅在给定前缀为本地前缀（例如/ static /）而不是URL（例如http://static.example.com/）时才起作用。

此外，此帮助程序功能仅提供实际的STATIC_ROOT文件夹；它不会执行django.contrib.staticfiles之类的静态文件发现。

---

推荐的解决方案：

在Nginx / apache conf中，在/absolute/path/to/static/和here中描述的部署和设置服务here后，您想要（和需要）的生产正在运行collectstatic。

---

替代：

如果出于某种原因，您不想使用通过NGINX / Apache提供的静态文件服务，或者如果您打算在即将到来的将来使用CDN服务，您可能会对使用白噪声感兴趣：http://whitenoise.evans.io/en/stable/django.html