similar to this SO Question but that solution would not work for me. I cannot get my image to render with the Angular frontend.
In the browser {{recipe.photo}} displays http://127.0.0.1:8000/media/images/photo1_mMxzxU0.png. From the other SO question I thought since this was an absolute url pointing to the image it would work..
html
<div *ngIf= "recipes">
<ul *ngFor ="let recipe of recipes">
{{recipe.name}}
{{recipe.photo}}
<img src={{recipe.photo}} height="150" >
</div>
models.py
class Recipe(models.Model):
name = models.CharField(max_length=30)
photo = models.ImageField(upload_to='images/', null=False, blank=False)
views.py
class RestaurantRecipes(generics.ListAPIView):
serializer_class = RecipeSerializerShort
serializers.py
class RecipeSerializerShort(serializers.ModelSerializer):
class Meta:
model = Recipe
fields = ['name','photo']
settings.py
STATIC_URL = '/static/'
MEDIA_ROOT = '/Users///backend/images/'
MEDIA_URL = '/media/'
My images are in this folder /Users///backend/images/images/IMAGES_HERE
The brackets, [], tell Angular to evaluate the template expression
try this :
<img [src]="recipe.photo" height="150" >
instead of this :
<img src={{recipe.photo}} height="150" >
Related
I was getting tired of figuring out how to fix this problem. I checked a lot of different posts and answers but nothing helped me.
I have a form where I'm creating new advert. I have file input there for Image.
Form is valid and everything works fine, but my problem is that when I want to display my image from Advert model then it's not showing on website.. even the alt text.
My template code:
{% for advert in adverts %}
<img src="{{ advert.get_image }}" alt="test"/>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="mb-4 card">
<div id="second-advert" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ advert.get_image }}" alt="test"/>
</div>
</div>
My urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('carapp.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
My settings.py:
STATIC_URL = 'carsearch/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
My models.py:
class Advert(models.Model):
def get_image(self):
if self.featured_image and hasattr(self.featured_image, 'url'):
return self.featured_image.url
else:
return '/path/to/default/image'
owner = models.ForeignKey(Profile, null=True, blank=True, on_delete=models.SET_NULL)
title = models.CharField(max_length=200)
[...] <-- there's more code
featured_image = models.ImageField(null=True, blank=True, default='profiles/user.png', upload_to='adverts/')
[...] <-- there's more code
def __str__(self):
return self.title
My project structure:
enter image description here
And my website:
enter image description here
The image should appears above these two containers.. but it doesn't.
When I go to admin panel I can see added image in my model and I can click it and see it.
I also can see it in my database with python shell and with DB Browser for SQLite
But when I inspect the website then I can find my img tag but it is disabled(?)
enter image description here
enter image description here
And my views.py:
def adverts(request):
adverts = Advert.objects.all()
context = {'adverts': adverts, 'profile': profile}
return render(request, 'carapp/advertsView.html', context)
I tried many things from google and nothing works.. I also can say that I have a Profile form and Profile model. And there is also a photo which I can update and everything works there..
Actually I found a solution for this problem. Maybe it’s not what I expected but it helps.
The problem was in my featured_image field in models.py. I had to remove the attr upload_to=“images/adverts”
I am learning to write a Django app which will fetch all images from os.path.join(BASE_DIR, 'media_root', 'uploads') and show it on html page.
But its not working like so.
admin.py
from .models import Experience
# Register your models here.
admin.site.register(Experience)
settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'
models.py
class Experience(models.Model):
id = models.AutoField(primary_key=True)
image = models.ImageField(upload_to='uploads/', default='newbalance.jpg', height_field=None, width_field=None)
studio_name = models.CharField(max_length=255)
designation = models.CharField(max_length=255)
duration = models.CharField(max_length=255)
description_short = models.TextField()
description_long = models.TextField()
keywords = models.CharField(max_length=255)
date = models.DateTimeField('DateAdded',
auto_now=True, auto_now_add=False)
class Meta:
db_table = "experience"
def __str__(self):
return self.studio_name + ' ' + self.duration
views.py
class ExperienceList(generic.ListView):
model = Experience
template_name = 'resumesection.html'
queryset = Experience.objects.all()
urls.py
urlpatterns = [
path('modelview/', views.ExperienceList.as_view(), name='experience_list'),
]
In error log,
2021-07-19 04:15:40,528: Not Found: /resume_site/modelview/uploads/atomic_arts.png
2021-07-19 04:15:41,239: Not Found: /resume_site/modelview/uploads/futureworks.jpg
I presume django should read image from 'MEDIA_ROOT/uploads' folder but it reads from '/resume_site/modelview/uploads/'. Which is not there.
I come close to the answer in this post Django admin view uploaded photo,
But cannot connect the dots between 'MEDIA_ROOT/uploads' and '/resume_site/modelview/uploads/'
How does viewing image, uploaded from admin, work in django. ?
EDIT: Part of resumesection.html in context
{% for exp in object_list %}
<h5>{{exp.studio_name}} | {{exp.duration}}</h5>
<img src="{{exp.image}}">
<p id="description_short_text">
{{exp.description_short}}
</p>
<p id="text" style="display:none;color:red">
{{exp.description_long}}
</p>
<h4 id='keywords_text' style="display:block;color:green">KEYWORDS</h4>
<p id='alt_text' style="display:block;color:green">{{exp.keywords}}</p>
{% endfor %}
urls.py in project
urlpatterns = [
path('admin/', admin.site.urls),
path('barefoot/', include('barefoot.urls')),
path('resume_site/', include('resume_site.urls')),
path('photo_gallery/', include('photo_gallery.urls')),
]
if settings.DEBUG: # added
import debug_toolbar
urlpatterns += [path('__debug__/', include(debug_toolbar.urls))]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
if you are want to fetch a file from a db & want to place in src you have to provide .url in last
so use this
<img src="{{ exp.image.url }}">
instead of
<img src="{{exp.image}}">
read this for better understanding https://docs.djangoproject.com/en/3.2/topics/files/
and tell me if you still getting error
I've posted something similar earlier without being able to find a suitable solution. One of the things I am struggling with is the ability to serve static path / file references within DJANGO html templates. Hopefully, by posting another question I will be able to understand how this works. Done quite some research and read through the DJANGO documentation without being able to find something covering my scenario.
Here we go:
Within my model I use a path reference field
class Product_images(models.Model):
product = models.ForeignKey(Products, on_delete=models.SET_NULL, blank=True, null=True)
path_to_image = models.CharField(max_length=150,null=True, blank=True)
name = models.CharField(max_length=50,unique=False,blank=True)
class Meta:
verbose_name = 'Product Image'
verbose_name_plural = 'Product Images'
def __str__(self):
return '{} - {} - {}'.format(self.pk, self.product, self.name)
The value of this field is set to (example):
static\images\Product\PowerBI\Receivables\Receivables 6.png
The files are physically stored within the app Main/static/....
My setting file contains:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
MEDIA_ROOT = os.path.join(BASE_DIR, 'Main/')
MEDIA_URL = '/Main/'
Then I have two templates within the app where I want to serve these images. One page uses a custom context processor in the following way:
{{ product_section }}
Which returns html including:
html_value += u'<img class="d-block w-100" src="{}" width="400px" height="250x" alt="{}">'.format(productimages_obj.path_to_image,productimages_obj.name)
This context processor tag is used within a template returned by the products_view view function.
Now, I want to use the same images within another view gallery_view:
def gallery_view(request, requestid, *arg, **kwargs):
productimages = Product_images.objects.filter(product=requestid)
if productimages.exists() != True:
return HttpResponseNotFound('<h1>Page not found</h1>')
context = {
'productimages': productimages
}
return render(request, "gallery.html", context)
When using the following template tag {{ productimages.path_to_image }} I am getting 404 "GET /Gallery/static/images/Product/PowerBI/Finance/Finance%207.png HTTP/1.1" 404 3485.
The template is coded as following:
<section id="gallery" class="bg-light">
<div class="container-fluid">
<div class="row">
{% for productimages in productimages %}
<div class="col-md">
<img src="{{ productimages.path_to_image }}" onclick="openModal();currentSlide({{ forloop.counter }})" class="hover-shadow">
</div>
{% endfor %}
</div>
</div>
Last but not least Urls.py:
urlpatterns = [
path('', views.home_view, name='home'),
path('Home', views.home_view, name='home'),
path('PowerBI', views.products_view, name='power bi'),
path('Services', views.services_view, name='services'),
path('About', views.about_view, name='about'),
path('Contact', views.contact_view, name='contact'),
path('Gallery/<int:requestid>', views.gallery_view, name='gallery'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
What mistake am I making here? Why does the GET include /Gallery/ within the URL? How do I circumvent this?
Thanks everyone.
I would set an image field and in the templates I would use its URL property:
models.py:
image = models.ImageField(null=True, blank=True)
.html file:
<img src="{{object.image.url}}" alt="" class="img-fluid">
I have a Django model for a user-uploaded photo. It contains a field defined as
class Photo(models.Model):
image = models.ImageField(upload_to='photo_image_files')
#property
def name(self):
return filename_without_extension
...
and settings.py defines
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
This means images are saved in /media/photo_image_files/. I would like to have JPEG files accessible at /jpeg/:filename and hide the actual path to the images from visitors. I have defined the corresponding view and url. However, now {{ photo.image.url }} predictably points to /media/photo_image_files/filename.jpg. As a workaround, I include images as
<img src="/jpeg/{{ photo.name }}" />
But that means I specify the location twice, in urls.py and in the template. How can I customise the URL?
You could subclass ImageField and define your own .url() method:
class JpegImageField(ImageField):
#property
def url(self):
return "/jpeg/{name}".format(name=self.name)
and use the new field class instead of regular ImageField:
class Photo(models.Model):
image = models.JpegImageField(upload_to='photo_image_files')
I need create a image upload with django, the problem is, django always saving in a global project(called linkdump) folder, I want save it on the project folder(linktracker).
setting.py:
STATIC_URL = '/static/'
model:
class Link(models.Model):
link_description = models.CharField(max_length=200)
link_url = models.CharField(max_length=200)
link_image = models.ImageField(upload_to= './static/')
def __str__(self):
return self.link_description
class Admin:
pass
now in the view:
<img src="{% static link.link_image %}" alt="{{ link.link_description }}">
it returns
http://127.0.0.1:8000/static/static/o-BLUE-LIGHT-SLEEP-facebook.jpg
and the upload is in the project folder(linkdump), not inside the app.
You can specify a function to return a custom path for the ImageField:
def get_upload_path(instance, filename):
return 'your/custom/path/here'
class Link(models.Model):
. . .
link_image = models.ImageField(upload_to=get_upload_path)
Now you can use information from the model instance to build up the path to upload to.
Additionally, you don't want to use the {% static %} template tag to specify the path to the image. You would just use the .url property of the field:
<img src="{{ link.link_image.url }}" alt="{{ link.link_description }}" />