为什么图像没有在 Html 模板中呈现，甚至被添加到静态文件 - Django？答案

【问题标题】：Why The Image Is Not Being Rendered In Html Template Even Being Added To Static Files - Django?为什么图像没有在 Html 模板中呈现，甚至被添加到静态文件 - Django？
【发布时间】：2020-08-31 18:55:17
【问题描述】：

我尝试在普通 HTML 文件中使用图像地址，效果很好，但是当我尝试使用 Django 使用 HTML 模板渲染图像时，它显示的只是图像占位符。当我检查图像元素时，它具有正确的 Src 属性，但仍然无法加载。这是HTML的和平

 <h1>{{article.title}}</h1>
 <div class="box">
   <img src= "{{article.article_thumbnail_image_url}}" alt="Failed To Load Thumbnail Image">
 </div>

这是渲染后的最终 HTML 文件


<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


  </head>
  <body>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>






    <div class="wrapper">

        
<title>Demo article</title>

<div class="header">
    <h4>Current Reading Progress</h4>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>


<div class="box">

    <div class="box">


        <div>
            <br>
            <br>
            <br>
            <h1>Demo article</h1>
            <div class="box">

             <img src= "Capture_jOmt1vm.PNG" alt="Failed To Load Thumbnail Image">
            </div>
        </div>
        <div class>

                <p class="font-weight-light">Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World</p>

        </div>
        <p>Aug. 31, 2020, 1:03 p.m.</p>
        <h3><a href="/articles/">Articles</a></h3>

    </div>
<style>
     .header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ee6c4d;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #0077b6;
  width: 0%;
}
.box{
  border: 1px solid gray;
  padding: 8px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}

    </style>

    <script>
    window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

    </script>

</div>







    </div>
    <style>

    </style>
</body>
</html>

这是我将静态文件传递给根 URL 的方式



urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

这是在 Settings.py 中配置静态文件的方式


STATICFILES_DIRS = (

    os.path.join(BASE_DIR,'assets'),

)

MEDIA_URL = '/articles/templates/articles/'

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

【问题讨论】：

开发工具有错误吗？
这里是开发工具控制台显示的内容，只有 2 个错误无法加载资源：服务器响应状态为 404（未找到）2（索引）：1 未检查 runtime.lastError：消息端口在收到响应之前关闭。
您是否尝试在模板标签中添加空格？这通常会在解释代码时导致错误。 {{ 正确}} {{错误}}
@Jonas 谢谢兄弟，但它仍然很糟糕我通过提供空间并重新启动服务器和刷新页面重试，但它不起作用
能否将渲染后的 html（源代码）也添加到您的帖子和文件源中

标签： python html django

【解决方案1】：

解决方案：
当曾经在 Django 中使用文件字段并动态渲染这些文件时，如果您只通过变量名的名称来获取文件所在的路径，那么 Django 模板将无法知道文件的位置位于。例如{{ model.variable }}这种方式，模板只会获取文件名而不是完整路径，并会尝试创建类似奇怪的路径

app/templates/file.html/yourfile

要解决这个问题，您必须使用 Django 的内置 .url 方法来获取位于静态文件中的文件的准确位置。

{{ model.variable.url}}

【讨论】：