I'm having an issue where I can't load images from anywhere but my media folder.
For example:
<img src="media/image.png" />
will load just fine
however if i move the "image.png" file 1 more folder deeper to:
<img src="media/folder/image.png" />
"image.png" will not load.
Does anyone have any ideas as to why this is happening?
You need to use django staticfiles module. 'Static' figures out where your files are placed and redirects all requests to this folder
Assuming that your image.png is located in you/yourapp/static/media/folder the following should do.
{% load static %}
<img src="{% static 'media/folder/image.png' %}" />
Read the docs about serving static files with django.
If not in production then perhaps this would be helpful: https://stackoverflow.com/a/52672594/1953366
It worked for me. You can use "/" for PATH to directly map the files. Folder hierarchy is not exposed though.
Related
I am trying to serve a static image to a css file using flask. I am using render_template() to to get the html file, and I have a static directory for my css and javascript. My other image is loading, but the image that I am referencing from the css file is not working and I get his from the flask terminal: GET /static/static/res/typewriter.jpg HTTP/1.1" 404
I tried typing in the path in my browser and it works fine
This is how I am referencing the image since the CSS file is already in the static directory. background-image: url("/res/typewriter.jpg");
I hope there is an easy fix for this, especially since I am new to this stuff. Thanks!
In your html file you should have this in the header:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='mainpage.css') }}">
... as long as your static directory is named static. In several of my Flask applications I am importing Bootstrap css like so:
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
Ensure you are visiting http://127.0.0.1:5000 in your browser (unless you changed the default).
Also here is a random example of how I serve images from the static directory:
h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>
I am having a problem where when I try to run my website through the runserver command, it doesnt display any of the images.
(I am very new to django, and website building at all)
this is the html in the template:
< img src="../../../static/Website_header.png" width="800" height="200" alt=""/> (without the whitespace)
and this is the settings.py:
http://pastebin.com/KvdrF1L2
Edit: When I tried to click display image in new tab this was shown: http://imgur.com/EgXw4bw
You should not have direct links to your static files.
On top of your template:
{% load staticfiles %}
Your image tag:
<img src="{% static 'images/test.png' %}" />
"images/test.png" is addressed relative to your static folder:
static
------ images
------------ test.png
I am trying to display images inline in Djano while sending HTML Email. I have the HTML Email working. But the images are displayed as an attachment, i followed the steps in https://www.vlent.nl/weblog/2014/01/15/sending-emails-with-embedded-images-in-django/ to display image as attachment. Which i do not want. I want the image to be displayed inline.
In my Django Template i have :
<img src="/static/url/location/image.png" />
The urls.py has the right setting. When i go to :
http://localhost:8000/static/url/location/image.png
i can see the image clearly.
When the email is sent, the image is not displayed and i do not know why. Any help is kindly appreciated.
I am using Django 1.6.2 btw.
EDIT: Implemented the suggestions given below about using Absolute URL.
I did try the absolute URL. Weird part is : When i used a absolute url of some other site, For ex:
<img src="google.com/images/srpr/logo11w.png"; />
the images are displayed inline. When i use the absolute url location of image on my local server, the image is not displayed :-(. Not sure what else i am missing.
You probably need an absolute url to the image on a server. Cannot reference relative images in an email as far as I know.
You could do this for an absolute url to the current host:
<img src="{{ request.get_host }}/static/url/location/image.png" />
You could probably benefit from using the {% static %} tag as well, (if you have static files configured correctly) like this:
<img src="{{ request.get_host }}{% static 'url/location/image.png' %}" />
For django projects there is an awesome tool called django-compressor. It combines all js or css files under compress template tag into single cached file, like this:
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
<style type="text/css">p { border:5px solid green;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="utf-8">
{% endcompress %}
I'm wondering if there is anything like this for tornado projects? Or maybe any workaround/alternative solution?
I've found this project on github, but it's no longer maintained.
Take a look at tornado_utils, it should do what you want. Especially take look at tornado_static.py
tornado_static is a module for displaying static resources in a Tornado web
application.
It can take care of merging, compressing and giving URLs ideal renamings
suitable for aggressive HTTP caching.
The best option I've seen so far is WebAssets.
From the documentation:
webassets is a general, dependency-independent library for managing
the assets of your web application. It can merge and compress your CSS
and JavaScript files, supporting a wide variety of different filters,
and supports working with compilers like CoffeeScript or Sass.
You can use it in standalone mode with tornado (see the specific documentation).
Set up is easy and pretty straightforward:
from webassets import Environment
static_directory = "../static"
output_directory = "/static"
my_env = Environment(static_directory, output_directory)
Of course you can customise it far better. The rest is pretty well explained in the documentation.
Main features:
Easy integration
Possible to compress static files in advance (command-line tool)
Possible to compress static files on the fly
Supports most minifying/compression libraries (JS, CSS)
Supports LESS/SASS compiling inside the browser
Supports compression of JS Templates inside the browser (Handlebars...)
Supports CSS sprite mapper
Example of what a template (here, Jinja2) looks like after proper configuration:
# css
{% assets filters="cssmin", output="css/compiled-layout.css",
"css/custom.css",
"css/bootstrap-datepicker.css",
"css/typeahead.css" %}
<link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
{% endassets %}
# js
{% assets filters="jsmin", output="js/lib/compiled-libs.js",
"js/lib/jquery-2.1.1.min.js",
"js/lib/jquery-ui.min.js",
"js/lib/bootstrap.min.js",
"js/lib/bootstrap-datepicker.js",
"js/lib/d3.min.js",
"js/lib/typeahead.bundle.min.js",
"js/lib/moment.min.js",
"js/lib/handlebars-v2.0.0.js",
"js/global.js" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
I've been using WebAssets tied to Flask for a year with no hassle and it's perfectly reliable, plus well-maintained: it's been there for several years, and last commit to date was yesterday.
As far as I understand from looking into the open-source tornado projects there is no standard and canonical way of doing static-files minification and compression in the "tornado world".
The different options I've seen, are:
tornado_utils (see the other answer)
a fresh torminify module
Douglas Crockford's jsmin.c port to python, see:
jsmin.py
a Python port of the YUI CSS compressor:
csscompressor
cssmin.py
slimit.minify() of the slimit javascript parser
Only the first two options are tornado-specific. Other tools need to be tied up with Tornado template rendering and static files serving mechanisms manually.
I am trying to learn django by reading the tutorial and Django book on the net.
I am trying to display a web page on a url.
For the same I wrote in the url pattern function the statement (r'^home/$' , home ) where I have imported the home function.
Also in the home function I wrote
def home( request ):
return render_to_response("home.html",None) // home.html is placed in the templates folder along with its .css
This must be wrong as I don't intend to pass any response ... so please tell what i should write here...
However the issue I am facing is that when I go to the url the html comes in plain without the css styling without the color etc.....
When I check my html template however that is fine ...
So what do I need to do to display the html as it is in the url ???
Thanks..
You need to put the .css in the STATIC_FILES directory (if you are using 1.3 or MEDIA_URL for 1.2)
http://docs.djangoproject.com/en/dev/howto/static-files/
Then you need to link to the css in the head of the html file with something like:
<head>
{% load static %}
<link rel="stylesheet" href="{% get_static_prefix %}html.css" />
</head>
I assume you are using the development server.
Make sure that your URLconf is correct:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
See: http://docs.djangoproject.com/en/dev/howto/static-files/#serving-static-files-in-development
Then your css files can be included like this:
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<head>
<link rel="stylesheet" href="{{ STATIC_PREFIX }}/yourpath/your.css" />
</head>
Off course the css files have to be located in your static_media dir.
This means, as stated in the docs, that you should set STATIC_ROOT to the appropriate folder, for example a folder named 'static_media' in your project directory.