I am using python, html, jinja, java script ect. to build a webapp on a raspberry pi powered device. So far when I put images on my webpages everything works fine. However when I create a "layered" webpage that is using a variable to differentiate between user profile files, it breaks my local image references which wont load and instead display their tag. Using online images for the image source works perfectly fine however.
Not Working Code(Python):
#app.route('/adminPortal/<user_id>', methods=['GET', 'POST'])
def adminPortal(user_id):
print('Admin Portal')
...
Working Code(Python):
#app.route('/adminPortal', methods=['GET', 'POST'])
def adminPortal():
print('Admin Portal')
Unchanged HTML:
<img src="{{ 'static/oldLady.jpg' }}" alt="Profile Pic Of User" height=200px> <span style="display:inline-block; width: 50px;"></span>
<img src="{{'static/' + avatar + '.png'}}" alt="Picture of Avatar" height=200px> <br>
<img src="https://api.time.com/wp-content/uploads/2021/06/Pills.jpg" alt="Picture of Avatar" height=200px> <br>
<img src="{{'static/Amy.png?' + time}}" width="240" usemap="#amymap" class="unselectclass">
So far I have not been able to find any success how I reference the photos, and I don't know how to create the same webpage infrastructure in any other manner than the "layered" system I have set up.
The URL static/oldLady.jpg means "relative to the directory with the current page". If you are rendering /adminPortal, then it means /static/oldLady.jpg. If you are rendering /adminPortal/joe, then it means /adminPortal/static/oldLady.jpg.
The solution is to use absolute URLs: /static/oldLady.jpg.
Related
I was trying to display photos and pdf files in a django project using <embed> but pdf file is not displaying
Here is what i was doing
This is view function
#login_required
def view_documents(request):
students = Student.objects.filter(user=request.user)
return render(request, 'student/view_documents.html',{'students':students})
and then I used for tag in template
{% for student in students %}
#lines of code
{% endfor %}
and to display the pdf file i have used
<embed src="{{student.adhar_card_pdf.url}}" width="800px" height="400px" type="application/pdf"/>
but it was showing some kind of error like localhost refused to connect
i also used iframe
<iframe src="{{student.adhar_card_pdf.url}}" style="width:718px; height:700px;" frameborder="0"></iframe>
But image is displaying in the browser using same code without any error
<embed src="{{student.photo_jpg.url}}" width="230px" height="250px" />
Why pdf file is not displaying ?? Please help me
Thanx in advance.
Edited: In console it is showing -- Refused to display '' in a frame because it set 'X-Frame-Options' to 'deny'.
This is how it is displaying pdf
X_FRAME_OPTIONS = 'SAMEORIGIN'
Insert the above line in settings.py just before the MIDDLEWARE section
and for the file path in embed tag write path as
{{student.file.get.photo_jpg.url}}
And then give a hard reset in Chrome or any browser you are using.
It worked for me I hope it works for you as well.
I've been doing a web tutorial to learn Django, and I got stuck on video 31 (https://www.youtube.com/watch?v=n8Pt8n0IAQ0). I've checked some other posts here but haven't found a solution.
It all worked fine till here. I want to change the colour of the top navbar, which is a CSS file called navbar-static-top.css, which I have stored in two routes in my project.
/static_in_env/static_root/css and /static_in_pro/our_static/css
I've got the settings file configured properly I think.
I wrote this code in the navbar-static-top.css file to change the colour,
.navbar-static-top {
margin-bottom: 19px;
background-color: #137937;
}
Then I used the header {% load staticfiles %} in my base.html template. Everything seems to be good.
I also did python manage.py collectstatic, and the message I receive is that everything was compiled properly, I get the same message as the video tutorial.
But then it doesn't work. The navbar colour doesn't change.
I also tried the same for an image (video 32 of the tutorial), stored it in the our_static/img and static_root/img folders, did manage.py collectstatic, and then wrote the following code in the navbar.html template to insert the image.
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'img/mvp_landing_logo.png' %}"></a>
And then I can't see the picture.
Something is wrong with my static files and I'm pretty frustrated and stuck, can't find what's going on.
Thanks a lot!!!!
I'm trying just for learning how to serve a video with the blobstore without it takes all the screen the video, for example
here I imported Video as video_model
class ViewVideo(webapp.Reque...,blobstore_handlers.BlobstoreDownloadHandler):
def get(self):
video_id = self.request.get('video_id')
video_instance = None
if video_id:
video_instance = video_model().get_video_content(video_id)
self.response.headers['Content-Type'] = 'video/mp4'
self.send_blob(video_instance.content.key())
class Video(db.Model):
content = blobstore.BlobReferenceProperty()
title = db.StringProperty()
def get_video(self,video_id):
return Video.get_by_id(video_id)
def get_video_content(self,content):
query_str = "SELECT * FROM Video WHERE content =:content"
return db.GqlQuery(query_str,content=content).get()
Where the video_id came from a url given, but as you see I put it directly in send_blob() function and this one when I tested it takes all the screen just to see the video, I was wondering how can I serve the video from my application without happening this, I was thinking embedded HTML but I can't figure it out how the source will be
Any help will be grateful
If it lacks of content to answer the question I will edit it
Without HTML5, it's a tricky mess. With HTML5, it becomes easy & elegant. Serve to the user's browser, as part of whatever page you're serving, the following HTML (5) snippet:
<video width="320" height="240" controls>
<source src="/getmp4?video_id=whatever" type="video/mp4">
Your browser does not support the video tag: please upgrade it!
</video>
and use that ViewVideo handler to serve only the /getmp4 URL, not the URL that your user directly gets via their browser.
The 320, 240, and the choice to show controls, are all optional, of course -- as even more is the use of whatever for the video id!-)
I'm making an application that receives images.
I'm making it in a pretty hacky way, where this is the HTML:
<body onload="javascript:setTimeout('location.reload(true);', 1000);" >
<div class="container">
<img class="img0" src="{{ uno }}"/>
<img class="img1" src="{{ dos }}"/>
<img class="img2" src="{{ tres }}"/>
</div>
</body>
And this is in views.py:
def main(request):
x = get_newest_pics()
uno = x[-1]
dos = x[-2]
tres = x[-3]
context = { 'uno' : uno, 'dos' : dos, 'tres' : tres }
return render(request, 'index.html', context)
I'm sure there's a better way to go about this, but I'm very new to Django and I don't know how. At this point, the page is just flickering every second showing the same images, when really I just want it to refresh whenever there is a new image. Is there a way to consistently call get_newest_pics() and refresh just the images, rather than the whole page? Or even just a way to make the page stop flickering?
The way to do this is to implement ajax on your front end, and then request for new images at an interval, once a new image is found, update the container where you are showing your images and add the new (available) image.
Have a look at the django-dajaxice library to help you with the "wiring" of your front end to django correctly.
The way you have written your code, all three images are sent at once to your page, and your javascript snippet is in effect just refreshing the page very quickly, which is why you see the flickering effect.
You could do a "hack" and create a separate view for each image in django, then call each view on an interval using javascript - it would have the same end result but really inefficient in terms of code.
I am using Web2Py, user images are dynamical and have to be loaded from a different system in the same server therefore they cannot be moved to be contained in the web2py application directory. So I cannot have a relative path to the images. Symbolink links are not an option.
I was thinking the solution could be to serve JPG images from an action call or web service, this way the application can access the local file and return it programatically without having to move a single image. For example a view has the following code:
<li class="file ext_jpg">
<figure class="image_container">
<img src="controller_name/action_serving_images/unique_id_genereted_for_this_image.jpg" alt="">
</figure>
</li>
having the Action:
def action_serving_images(image_id)
#obtain image based on it's unique generated id
return image
Or for the service case:
<li class="file ext_jpg">
<figure class="image_container">
<img src="controller_name/service_serving_images/jpg/image/unique_id_genereted_for_this_image.jpg" alt="">
</figure>
</li>
having the Service:
def service_serving_images():
return service()
#service.jpg
def image(image_id):
#obtain image based on it's unique generated id
return image
Is any of these options possible?
How can I fetch the image and return it as a byte stream with the proper content-type so the browser can render it properly?
Do i need to create a special decorator for JPG in the case of the Service? How?
This is easier than that.
First you create an action like this:
def serve_image():
id = request.args(0)
filename = get_image_filename_from(id)
stream = open(filename,'rb')
return response.stream(stream, attachment=True, filename=filename)
Then in your views you do:
<img src="{{=URL('serve_image',args='1234')}}" />
where 1234 is the id of the image you want.