Images not showing up when viewing HTML code

Question

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>

It just shows up as a broken image link, but all of the .png files are in the /media/img/ folder.

score 2 · Answer 1 · edited May 23 '17 at 11:46

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:

Papouche Guinslyzinho · Accepted Answer · 2017-05-25T07:38:43.833

There is a few steps you need.

You will have to insert {% load static %} on the top of your template file
You will have to create a folder named static and media on your root of your application
On your project/settings.py file you need to tell django where to look for your static files
in your template you will have to add a static call (see step 4)
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)

Thanks for that. I will give it a shot once I can get the manage.py server running. I'm very certain this will fix the issue. We are moving this app from one server to another and updating some of the python packages in the process, seeing as the ones we weren't using are no longer available. We are having issues with the outdated Django code we were using. Will be a painstaking process. — iNeedScissors61, Apr 26 '17 at 14:06

score 1 · Answer 3 · answered Apr 26 '17 at 10:53

1

Add below line in urls.py and check once.

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

answered Apr 26 '17 at 10:53

sreekanth kuriyala

1,197
11
11

Images not showing up when viewing HTML code

3 Answers3