python - examples - ¿Cómo incluyo los archivos de imagen en las plantillas de Django?

include django

Question

Soy nuevo en Django y estoy tratando de aprenderlo a través de un proyecto simple que estoy desarrollando llamado ''dubliners'' y una aplicación llamada ''book''. La estructura del directorio es así:

dubliners/book/ [includes models.py, views.py, etc.]
dubliners/templates/book/

Tengo un archivo JPG que debe mostrarse en el encabezado de cada página web. ¿Dónde debería almacenar el archivo? ¿Qué camino debo usar para que la etiqueta lo muestre usando una plantilla? Probé varias ubicaciones y rutas, pero hasta ahora nada funciona.

...

Gracias por la respuesta publicada a continuación. Sin embargo, probé las rutas relativas y absolutas a la imagen, y todavía aparece un icono de imagen roto en la página web. Por ejemplo, si tengo una imagen en mi directorio de inicio y uso esta etiqueta en mi plantilla:

<img src="/home/tony/london.jpg" />

La imagen no se muestra. Sin embargo, si guardo la página web como un archivo HTML estático, las imágenes se muestran, por lo que la ruta es correcta. ¿Tal vez el servidor web predeterminado que viene con Django mostrará imágenes solo si están en una ruta particular?

Answer 1

/ directorio de medios en la raíz del proyecto

Settings.py

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

urls.py

 urlpatterns += patterns(''django.views.static'',(r''^media/(?P<path>.*)'',''serve'',{''document_root'':settings.MEDIA_ROOT}), )

modelo

<img src="{{MEDIA_URL}}/image.png" >

Answer 2

En producción, solo tendrá el HTML generado a partir de su plantilla apuntando a cualquier lugar donde el host tenga archivos multimedia almacenados. Entonces su plantilla solo tendrá, por ejemplo

<img src="../media/foo.png">

Y luego se asegurará de que ese directorio esté allí con los archivos relevantes.

durante el desarrollo es un problema diferente. Los documentos de django explican de manera concisa y clara que es más efectivo vincularse allí y escribirlo aquí, pero básicamente definirá una vista para los medios del sitio con una ruta de acceso codificada a la ubicación en el disco.

here .

Answer 3

Entiendo que tu pregunta fue sobre archivos almacenados en MEDIA_ROOT, pero a veces es posible almacenar contenido en estático, cuando ya no estás planeando crear contenido de ese tipo.
Puede ser que este sea un caso raro, pero de todos modos, si tiene una gran cantidad de "imágenes del día" para su sitio, ¿y todos estos archivos están en su disco duro?

En ese caso, no veo ninguna contra para almacenar dicho contenido en STATIC.
Y todo se vuelve realmente simple:

estático

Para vincular a archivos estáticos que se guardan en STATIC_ROOT Django se envía con una etiqueta de plantilla estática. Puede usar esto independientemente si usa RequestContext o no.

{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />

copiado de la documentación oficial de django 1.4 / Etiquetas y filtros de plantilla incorporados

Answer 4

He pasado dos días seguidos trabajando en esto, así que pensé en compartir mi solución también. A partir del 26/11/10, la sucursal actual es 1.2.X, por lo que tendrá que tener lo siguiente en su configuración.py :

MEDIA_ROOT = "<path_to_files>" (i.e. /home/project/django/app/templates/static)
MEDIA_URL = "http://localhost:8000/static/"

* (recuerde que MEDIA_ROOT es donde están los archivos y MEDIA_URL es una constante que usa en sus plantillas). *

Luego en ti url.py coloca lo siguiente:

import settings
# stuff
(r''^static/(?P<path>.*)$'', ''django.views.static.serve'',{''document_root'': settings.MEDIA_ROOT}),

Luego, en tu html puedes usar:

<img src="{{ MEDIA_URL }}foo.jpg">

La forma en que funciona django (por lo que puedo imaginar es:

1. En el archivo html reemplaza a MEDIA_URL con la ruta MEDIA_URL que se encuentra en setting.py
2. Se busca en url.py encontrar coincidencias para MEDIA_URL y luego, si encuentra una coincidencia (como r ''^ static / (? P. ) $'' * Se relaciona con http: // localhost: 8000 / static / ) busca para el archivo en MEDIA_ROOT y luego lo carga

Answer 5

Otra forma de hacerlo:

MEDIA_ROOT = ''/home/USER/Projects/REPO/src/PROJECT/APP/static/media/''
MEDIA_URL = ''/static/media/''

Esto requeriría mover su carpeta multimedia a un subdirectorio de una carpeta estática.

Luego, en su plantilla puede usar:

<img class="scale-with-grid" src="{{object.photo.url}}"/>

Answer 6

Probé varios métodos, pero no funcionó. Pero esto funcionó. Espero que funcione también para ti. El archivo / directorio debe estar en estas ubicaciones:

projec / your_app / templates project / your_app / static

settings.py

import os
PROJECT_DIR = os.path.realpath(os.path.dirname(_____file_____))
STATIC_ROOT = ''/your_path/static/''

ejemplo:

STATIC_ROOT = ''/home/project_name/your_app/static/''
STATIC_URL = ''/static/''
STATICFILES_DIRS =(
PROJECT_DIR+''/static'',
##//don.t forget comma
)
TEMPLATE_DIRS = (
PROJECT_DIR+''/templates/'',
)

proj / app / templates / filename.html

dentro del cuerpo

{% load staticfiles %}
//for image
img src="{% static "fb.png" %}" alt="image here"
//note that fb.png is at /home/project/app/static/fb.png

Si fb.png estaba dentro /home/project/app/static/image/fb.png, entonces

img src="{% static "images/fb.png" %}" alt="image here"

Answer 7

Prueba esto,

settings.py

# typically, os.path.join(os.path.dirname(__file__), ''media'')
MEDIA_ROOT = ''<your_path>/media''
MEDIA_URL = ''/media/''

urls.py

urlpatterns = patterns('''',
(r''^media/(?P<path>.*)$'', ''django.views.static.serve'',
{''document_root'': settings.MEDIA_ROOT}),
)

.html

<img src="{{ MEDIA_URL }}<sub-dir-under-media-if-any>/<image-name.ext>" />

Advertencia

¡Tener cuidado! al usar Context() obtendrá un valor vacío para {{MEDIA_URL}} . Debe usar RequestContext() , en su lugar.

Espero que esto sea de ayuda.

Answer 8

Si su archivo es un campo modelo dentro de un modelo, también puede usar ".url" en su etiqueta de plantilla para obtener la imagen.

Por ejemplo.

Si este es tu modelo:

class Foo(models.Model):
foo = models.TextField()
bar = models.FileField(upload_to="foo-pictures", blank = True)

Pase el modelo en contexto en sus puntos de vista.

return render (request, "whatever.html", {''foo'':Foo.objects.get(pk = 1)})

En tu plantilla, podrías tener:

<img src = "{{foo.bar.url}}">

Answer 9

Tu

<img src="/home/tony/london.jpg" />

funcionará para un archivo HTML leído desde el disco, ya que asumirá que la URL es file:///home/... Sin embargo, para un archivo servido desde un servidor web, la URL se convertirá en algo así como: http://www.yourdomain.com/home/tony/london.jpg , que puede ser una URL inválida y no lo que realmente quiere decir.

Para saber cómo servir y dónde colocar sus archivos estáticos, consulte este here . Básicamente, si está utilizando el servidor de desarrollo de django, quiere mostrarle el lugar donde viven sus archivos multimedia, luego haga que su urls.py sirva esos archivos (por ejemplo, usando algún prefijo /static/ url).

Te exigirá que pongas algo como esto en tu urls.py :

(r''^site_media/(?P<path>.*)$'', ''django.views.static.serve'',
{''document_root'': ''/path/to/media''}),

En el entorno de producción, debe omitir esto y hacer que su servidor http ( apache , lighttpd , etc.) sirva archivos estáticos.

Answer 10

En desarrollo
En la carpeta de la aplicación, crea el nombre de la carpeta ''estático'' y guarda la imagen en esa carpeta.
Para usar la imagen:

<html>
<head>
{% load staticfiles %} <!-- Prepare django to load static files -->
</head>
<body>
<img src={% static "image.jpg" %}>
</body>
</html>

En producción:
Todo igual que en desarrollo, solo agrega dos parámetros más para Django:

1. agregar en settings.py
   STATIC_ROOT = os.path.join(BASE_DIR, "static/") (esto preparará la carpeta donde se almacenarán los archivos estáticos de todas las aplicaciones)

2. asegúrate de que tu aplicación esté en INSTALLED_APPS = [''myapp'',]

3. en el comando terminall run python manage.py collectstatic (esto hará que la copia de los archivos estáticos de todas las aplicaciones incluidas en INSTALLED_APPS a la carpeta estática global - carpeta STATIC_ROOT)
   
   Eso es todo lo que Django necesita, después de esto, necesita hacer alguna configuración del lado del servidor web para hacer las autorizaciones para usar la carpeta estática. Por ejemplo, en apache2 en el archivo de configuración httpd.conf (para windows) o sites-enabled / 000-default.conf. (en la parte del host virtual del sitio para Linux) agregue:

   Alias ​​/ static "path_to_your_project / static"

   Requerir todo otorgado
   
   Y eso es todo