Hi, I have been trying to upload a image from the static/images folder into the print job report using the editable jinja2 template provided in the print job history plugin. However no image appears no matter what I try to do, only the alt text appears. I have attached the code I tried to use in the jinja2 template to import the image below.
<img src= {{ url_for('static', filename = 'images/img.png') }} alt="example">
Is there something I am missing? Thanks for your help!
I think this will result in a file trying to load from http://octopi.local/static/images/img.png for example, which probably is the wrong path?
Hi thank you for the reply. I tried moving the image to the octopi static file and trying again but to no avail. I forgot to include this in the post but there is already a image being imported into the report from the plugin's static file somehow using another function. The function is made to insert the picture taken by a raspberry pi camera at the end of the print into the report. However since there is no camera attached to my Rpi (as I am running a development version on my windows laptop), it imports a "no image found" picture from the plugin's static folder into the report. The specific code is attached below:
Jinja2 template code:
<img class="img-polaroid" src="{{ url_for('plugin.PrintJobHistory.get_snapshot',snapshotFilename=printJobModelAsJson["snapshotFilename"] ) }}" >
get_snapshot code from the API:
@octoprint.plugin.BlueprintPlugin.route("/printJobSnapshot/<string:snapshotFilename>", methods=["GET"])
def get_snapshot(self, snapshotFilename):
absoluteFilename = self._cameraManager.buildSnapshotFilenameLocation(snapshotFilename)
return send_file(absoluteFilename, mimetype='image/jpg', cache_timeout=1)
snapshotFilename here is just the name of the snapshot.
You might have to poke around in the developer tools in the browser to see exactly what the output of this template ends up being to work out what is wrong. You can use the 'Elements' tab for this, by right clicking and pressing 'inspect'.
That will allow you to check that the URL is being rendered correctly or not.
I did notice one issue with your first post:
You need quotes " around the url, so it will render like <img src="URL" alt="example">. Seems fixed in the followup posts however.
Hi thanks for the reply. I checked my code again and you were right, I forgot the quotes and changed it. I tested the code again to no avail. I then changed the image in the octopi's static folder to another png file and the image was somehow successfully imported into the template. Hence @jneilliii was actually right in stating that it was looking for the image in the octopi's static folder. However would it be possible to change it to look at the plugin's static folder instead? I have attached the inspect element image below with the picture imported into the report.
does the image show up anywhere else in the UI, like in a job list somewhere? seeing what it is there would help reverse engineer the path, or I guess we would just look at the print job history code to see if there are any blueprint routes for displaying image. I suspect there is.
found it in the default report definition here...
{{ url_for('plugin.PrintJobHistory.get_snapshot',snapshotFilename=printJobModelAsJson["snapshotFilename"] ) }}
Hi thanks for the reply. I tried looking into the source code to try and reverse engineer how its uploading the image from the plugin static folder but I couldn't really understand the calling function. I did put the source code relating to this in my previous reply, apologies I think I may have not explained properly that it was the source code. I have attached the related code below again.
However I suspect that there is another block of code for when there is no snapshot taken by the Rpi camera to insert the "No image found" picture from the plugin's static folder. I unfortunately can't locate this code.
Ah, I knew I had talked about this before... Served path to plugin's static/img files...? - #17 by jneilliii
so...
/plugin/PrintJobHistory/static/images/no-photo-icon.jpg
or any of the filenames listed here
not sure how that works in the context of the jinja render and url_for though. maybe something like
{{ url_for('plugin.PrintJobHistory.static.images', filename='no-photo-icon.jpg') }}
but it might not even be necessary.
Yep the path you stated is the right one. Specifically for rendering it in jinja template, the code is as follows:
<img src="/plugin/PrintJobHistory/static/images/no-photo-icon.jpg">
Thank you so much!
Glad to help when I can.