Jquery path not loading in Django

Question

I want to use this pluggin for watermarking images in my django website. After following the instruction I made it work in plain html server (wampserver) after trying it in my django environment, it's not working.

HTML (wampserver)

html lang="en">
<title>cool</title>
<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


</head>
<body>
<script type="text/javascript" src="js/watermark.jquery.js"></script>
<script type="text/javascript" src="js/watermark.jquery.min.js"></script>
    <script language="javascript">
    var config = {
        "path": "images/watermark.png"};
     $(document).ready(function() {
     $(document).watermark(config);
    });
</script>

    <img src="images/hall1.jpg" alt="" class="watermark"/>
    <img src="images/hall3.jpg" alt="" title="This is an example of a caption" class="watermark"/>
    <img src="images/main.jpg" alt="" class="watermark"/>


</body>
</html>

The above code is working fine.

Django Environment(Not working)

  </head>
  <body>    
   <script type="text/javascript" src="{{MEDIA_URL}}/css/watermark.jquery.js"></script>
   <script type="text/javascript" src="{{MEDIA_URL}}/css/watermark.jquery.min.js"></script>
    <script language="javascript">
    var config = {
        "path": "/media/css/watermark.png" };
     $(document).ready(function() {
     $(document).watermark(config);
    });
  </script>

  <li><img src="{{ MEDIA_URL }}/{{post.main}}" class="watermark"/> </li>
  <li><img src="{{ MEDIA_URL }}/{{post.side}}" class="watermark"/> </li>
  <li><img src="{{ MEDIA_URL }}/{{post.sitting}}" class="watermark"/> </li>

  </body>

How can I fix this issue?

check the network tab of your browser to see the actual location of the file being requested — Arun P Johny, Mar 23 '13 at 09:03
http://stackoverflow.com/questions/15081893/unable-to-serve-static-files-like-css-js-in-django-python/15082062#15082062 — catherine, Mar 23 '13 at 13:03
There is no reason to load jQuery and the jQuery plugin twice! Once is enough. — Felix Kling, Mar 24 '13 at 00:46

Alireza Savand · Accepted Answer · 2013-03-23T21:35:10.897

If you want to address your static files like your css/js files, Then you have to use STATIC_URL.

   <script type="text/javascript" src="{{ STATIC_URL }}/css/watermark.jquery.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}/css/watermark.jquery.min.js"></script>

So the same way will be used for watermark.png path:

"path": "{{ STATIC_URL }}/css/watermark.png"

Also consider that MEDIA_ROOT where you can refer to it with MEDIA_URL is absolute filesystem path to the directory that will hold user-uploaded files is not a right place for your assets, You should config it correctly then you will be able to address them by STATIC_URL.

For more on this topic:

Jquery path not loading in Django

1 Answers1