for fun I am monitoring the free disk space on my linux box. I have indexed the mount points and store the contents in a MySQL database. Now I want to display this info using django.
A cron job automatically creates plots of the free space for the last 24 hours. They are named "graph_day_drive_1.png" to "graph_day_drive_3.png", where the number stands for the id of the mount point. I have put these images in the static directory of my app.
Now, I want to display them when showing a details view for a selected mount point.
I've read that the usual way to access an image is:
<img src="{% static "diskspace/graph_day_drive_1.png" %}" alt="last 24h"/><br>
which, of course, displays the same image regardless of which drive I select. I've tried using the following (drive refers to the model I read from the database):
<img src="{% static "diskspace/graph_day_drive_{{ drive.id }}.png" %}" alt="last 24h"/><br>
but it doesnt work as it creates the following html code:
<img src="/static/diskspace/graph_day_drive_%7B%7B%20drive.id%20%7D%7D.png" alt="letzte 24h"/>
which, obviously, doesn't work.
Can anyone tell me the proper way to access these images?
Related
I'm trying to access the Associated Image for a page separate from a call to dspBody(). I see that I can get it using:
#$.content().getImageURL()#
But I need a specific defined size of the image. I have several custom sizes defined (like: medium, large, original, etc.).
I've tried passing the size in as a parameter as explained here - MURA: getImageURL small size cuts off the image
#$.content().getImageURL(size='original')#
But my HTML is coming back empty:
<img src="">
How do I go about pulling back one of my predefined sizes?
Try it without specifying the size.
This works for me using Mura version 6.2.
#$.content().getImageURL('original')#
You can change original to whatever your custom image size is named.
<cfoutput>
<img src="#$.content().getImageURL('customname')#" alt="Alt Title" title="Image Title" />
</cfoutput>
See if this way works for you.
I want to input an image in the .html so I put the image in the static files and I don't want to apply CSS. But it says it can't find that pic I wanna use.
In the .html file, I wrote like this
<img src="images/background.jpg alt="It is an img">
So, can anybody tell me what to do or anything I should change in other files like settings.py?
My files context is what the image shows.
Please add some code for better understanding of your question, and you can add image directly in your question without sharing external links.
For static file you can use,
{% load static %}
<img src="{% static 'your image location' %}" alt=image>
# in your case location is 'lemonade/images/background.jpg'
Here is the official document,
Django Static Files
Is there any difference when using:
<img src="{% static 'images/someimage.png' %}"
and
<img src="https://s3.us-east-2.amazonaws.com/my-bucket/static/images/someimage.png"
The big difference is that in the first method, if you wanted to someday change the location of your static files, i.e. to another directory or even a CDN, you would only need to update the 'static' location in your settings file.
In the second method you would need to do a global search and replace to update the URLs, so some would argue that the first method is preferable.
Other than that, when the site is running, it won't make any difference as far as the user is concerned.
There is no difference as such for the image display.
Only thing is in one you are using relative path and other you are hardcoding image url.
Recommended: Relative path should be used.
The documentation for the Foundation for Apps (and Angular Base Apps, which is the now-maintained fork of F4A) Interchange gives this example as a way to load only the small size of an image on mobile devices in order to save bandwidth:
<ba-interchange>
<img media="small" src="assets/img/small.jpg">
<img media="medium" src="assets/img/medium.jpg">
<img media="large" src="assets/img/large.jpg">
</ba-interchange>
However, while only the small image is displayed, the browser still sees three img tags and requests all three images, before angular is even loaded. This defeats the purpose of using the interchange at all, at least, if your purpose is to save bandwidth.
The Foundation 6 for Sites Interchange avoids this by putting all of the images into a data-interchange attribute string on the element instead. Does F4A have something similar that I'm missing? Or is there something about the above example code that I'm missing?
I would suggest using the ba-if directive provided by Angular Base Apps. This directive internally uses the ng-if directive, causing the img element to not be added to the DOM except when the specified media query is matched.
Your code can be re-written as follows using the ba-if directive:
<img ba-if="small only" src="assets/img/small.jpg">
<img ba-if="medium only" src="assets/img/medium.jpg">
<img ba-if="large only" src="assets/img/large.jpg">
I am writing a PDF dynamically, and am creating a QR code on the document for eTicketing purposes
i set my cfdocument localurl=yes to include a different image, which works fine, but since I am using an API call to get the binary for the qrCode, the using cfimage to display the image, it is only showing a red X
<cfdocument format="PDF" overwrite="Yes" localUrl="yes" pageType = "letter">
<body>
<cfoutput>
<section id="header">
<img src="file:///#ExpandPath('images/header.png')#"/>
<cfimage action="writeToBrowser" source="#rc.qrCode#" />
</cfoutput>
</body>
</html>
</cfdocument>
the source variable rc.qrCode is a binary response that works perfectly until i place inside cfdocument, it generates a url like this http://mysite/CFFileServlet/_cf_image/_cfimg-7945382145198648283.PNG as image source
i am sure this has todo with localurl and file:///, i just an not knowledgable enough to know why
Do not need to use physical path rather use relative path to your page.
e.g.
If you code in index.cfm of root folder and image inside images folder
try <img src="images/header.png"> , Note that it should not start with root path rather relative to your file.
UPDATE
writetoBrowser internally write file to hard drive to it's temporary location (topically, C:\ColdFusion10\cfusion\tmpCache\CFFileServlet) and while rendering it to browser it use relative path like "/CFFileServlet/_cf_image/_cfimg1592404668342998556.PNG", you can say that ColdFusion internally map CFFileServlet directory with all coldfusion site but notice leading forward slash and this makes issue with localurl=true. Since localurl=true either need physical path or relative path to your document.
Good idea is instead of writetobrowser you can write same image to harddrive at your location and give physical path in img tag. I do not this there will any performance issue since ColdFusion internally doing same thing when you are using writetobrowser attribute :)