CODEWITHSUNDEEP
htmldjango
iNeedScissors61
iNeedScissors61

Reputation: 195

Images not showing up when viewing HTML code

I have an index page for a django project I am working on but the images I attach to the buttons aren't showing up when I view it. 

<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>

Here is what it looks like when I view the page in a browser It just shows up as a broken image link, but all of the .png files are in the /media/img/ folder.

Upvotes: 0

Views: 1207

Answers (3)

Papouche Guinslyzinho
Papouche Guinslyzinho

Reputation: 5468

There is a few steps you need.

  1. You will have to insert {% load static %} on the top of your template file
  2. You will have to create a folder named static and media on your root of your application
  3. On your project/settings.py file you need to tell django where to look for your static files
  4. in your template you will have to add a static call (see step 4)
  5. modify your project urls.py

mytemplate.html ... (step 1) example

{% 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 (step 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')

step 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" >

so in your static folder your will have this structure static > media > img > tools.png

but I suggest you to remove media static > img > tools.png

And if your image comes from a Model object then automatically Django will go look on the folder media

media > tools.png

step 5

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

Upvotes: 2

sreekanth kuriyala
sreekanth kuriyala

Reputation: 1353

Add below line in urls.py and check once.

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

Upvotes: 1

LasstLos
LasstLos

Reputation: 264

Not familiar with django or what webserver you're using but occasionally there's extra stuff going on under the covers depending on what you're using to host the files. If you put 127.0.0.1:8000/media/img/monitor.png in your browser does it load your image? I suspect that it isn't serving those images rather than an html issue.

maybe something in one of these guys will help:

Upvotes: 2

Related Questions