查看HTML代碼時圖像沒有顯示

我有一個我正在處理的django項目的索引頁，但是當我查看它時，附加到按鈕的圖像沒有顯示出來。查看HTML代碼時圖像沒有顯示

<html> 
    <head> 
     <title>Support Tools</title> 
     <style type="text/css"> 
     .button { 
      float: left; 
      margin-left: 30px; 
      margin-bottom: 30px; 
      width: 350px; 
      height: 150px; 
      background: url('/media/img/blank.png'); 
      background-repeat: no-repeat; 
      cursor: hand; 
     } 
     .button img { 
      position: relative; 
      left: 20px; 
      top: 10px; 
     } 
     .button div { 
      font-family: Trebuchet MS, Calibri; 
      color: white; 
      font-weight: bold; 
      font-size: 22pt; 
      text-align: center; 
      position: relative; 
      top: -100px; 
      left: 120px; 
      width: 220px; 
     } 
     .title { 
      font-family: Calibri, Helvetica, Arial, Verdana; 
      font-size: 18pt; 
      font-weight: bold; 
     } 
     a, a:link, a:visited, a:active, a:hover { 
      text-decoration: none; 
     } 
     </style> 
     <!--[if lte IE 6]> 
     <script type="text/javascript" src="/media/js/supersleight-min.js"></script> 
     <![endif]--> 
    </head> 
    <body id="b"> 
     <p class="title">GAI Support Tools</p> 
     <a href="/eam/"> 
      <div class="button"> 
       <img src="/media/img/tools.png" /> 
       <div>EAM<br />Support Tool</div> 
      </div> 
     </a>    
     <a href="/admin/minisar/"> 
      <div class="button"> 
       <img src="/media/img/database.png" /> 
       <div>miniSAR<br />Administration</div> 
      </div> 
     </a>    
     <a href="/ai_stats/"> 
      <div class="button"> 
       <img src="/media/img/chart.png" /> 
       <div>Web Service<br />Dashboard</div> 
      </div> 
     </a>    
     <a href="/health/production/"> 
      <div class="button"> 
       <img src="/media/img/monitor.png" /> 
       <div>&nbsp;Web Service<br />Health</div> 
      </div> 
     </a>    
     <a href="/toys/user/"> 
      <div class="button"> 
       <img src="/media/img/users.png" /> 
       <div>User<br />Search</div> 
      </div> 
     </a>    
     <a href="/toys/ud_data_extract/"> 
      <div class="button"> 
       <img src="/media/img/database.png" /> 
       <div>UD Data<br />Extract</div> 
      </div> 
     </a>    
     <a href="/solutions/"> 
      <div class="button"> 
       <img src="/media/img/solutions.png" /> 
       <div>Solution Matrix</div> 
      </div> 
     </a>    
     <a href="/directentry/"> 
      <div class="button"> 
       <img src="/media/img/dice.png" /> 
       <div style="text-align: left; padding-left: 2.5em;"><u>DI</u>rect<br /><u>C</u>XML<br /><u>E</u>ntry</div> 
      </div> 
     </a>    
     <script type="text/javascript"> 
     supersleight.limitTo("b"); 
     supersleight.init(); 
     </script> 
    </body> 
</html>

它只是顯示爲一個殘缺的圖像鏈接，但所有的.png文件都在/media/img/文件夾中。

來源

2017-04-25 R2DeeTard

有你需要幾個步驟。

您必須對您的模板文件的頂部插入{% load static %}
您必須創建一個名爲靜態和媒體你對自己的應用程序
的根文件夾在您的project/settings.py文件你需要告訴Django在哪裏尋找你的靜態文件
在你的模板中，你將不得不添加一個靜態調用（見步驟4）
修改你R項目urls.py

mytemplate.html ...（步驟1）例如

{% load static %} 
<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

settings.py（步驟3）

STATIC_URL = '/static/' 
STATIC_ROOT = os.path.join('staticfiles') 

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'), 
) 

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

步驟4

<img src="{% static 'media/img/tools.png' %}" alt="image of ..." class="img-responsive img-rounded" > 
or if the image come from a Model object 
<img src="{{object.image}}" alt="image of {{object.description}}" class="img-responsive img-rounded" >

所以在你的靜態文件夾中你會有這個結構 靜態>媒體> IMG> tools.png

但我建議你刪除媒體 靜態> IMG> tools.png

如果你的圖片來自於一個模型對象，然後自動Django會去看該文件夾介質上

媒體> tools.png

步驟5

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

來源

2017-04-25 22:21:56

感謝您的。一旦我可以運行manage.py服務器，我會給它一個鏡頭。我很肯定這會解決這個問題。我們正在從一個服務器移動這個程序到另一個和更新一些Python包的過程中，看到我們沒有使用的手機將不再可用。我們正在使用過時的Django代碼。將是一個艱苦的過程。 – R2DeeTard

不熟悉django或您正在使用的web服務器，但偶爾會根據您用來託管文件的情況在封面下發布額外的內容。如果您在瀏覽器中放入127.0.0.1:8000/media/img/monitor.png，它是否會加載您的圖像？我懷疑它沒有提供這些圖片而不是HTML問題。

或許真的在這些傢伙的人會有所幫助：

來源

2017-04-25 19:41:48 LasstLos

在urls.py中添加以下行並檢查一次。

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

來源

2017-04-26 10:53:33

查看HTML代碼時圖像沒有顯示

回答

相關問題