I want to load an image on my template using:
<img src="{{ item.pic }}">
It works fine sometimes but once I start doing it from a view it adds the path of that view to my image src automatically causing the image to fail to load.
I want it to be
src="images/item.jpg"
for example, but because of different views it may end up as
"view1/images/item.jpg" or
"anotherview/images/item.jpg"
causing Django to be unable to find the image. Is there a way to code it so that view names won't be added to the src?
You should use an absolute URL, you can do this with:
<img src="/{{ item.pic }}">
Normally if this is a FileField (or an ImageField which is a subclass of a FileField), you can let Django determine the URL with:
<img src="{{ item.pic.url }}">
In that case Django will use the MEDIA_URL [Django-doc] and will also serve these files. In production, you will need to configure a webserver like Apache, Nginx, etc.; or let a Content Delivery Network (CDN) serve these files.
Related
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
We use Jekyll 4.2.0 to generate a static HTML site that we serve using jekyll serve for debug purposes. On my machine (Arch Linux), this works correctly but on my colleagues machines (Arch Linux and Mac OS), Jekyll incorrectly generates absolute paths, so that for example image links on the local site point to e.g. https://ourdomain//public/image.png instead of http://localhost:4000//public/image.png.
The links are defined as e.g. {{site.url}}{{ site.baseurl}}/public/img.png
How can I get Jekyll to keep local paths intact on my colleagues machine?
Solution
The problem was solved by #Kin but I had to perform two modifications
Use single quotes for the image path, else it conflicts with the outer double quotes.
Use relative_url instead of relative.
The end result is <img src="{{ '/public/img.png' | relative_url }}">.
Why it worked differently on different machines
Equal behavior was achieved by deleting the _site folder before calling jekyll serve --incremental, as the relative paths were used before and jekyll serve seems to only update some parts of the site.
Then, the original {{site.url}}{{ site.baseurl}}/public/img.png actually specifies an absolute path in any circumstance, as site.url seems to take the hardcoded url attribute from _config.yml instead of magically setting this value to the deployed webpages local URI as I expected.
The reason I used site.url and site.baseurl at first was that I also deployed into a subfolder of a domain using github pages but that use case is covered by relative_url as well.
Update with OP's solution
The problem was solved by using relative_url on the images [2]
[2] https://jekyllrb.com/docs/liquid/filters/
Original Post
In my past Jekyll project[1], we were able to use jekyll serve on various platforms without issues. It is possible we avoided the issue you are seeing by used relative [1] on all of our image URLs. Here is an example
<img id="myImage" src="{{ "/img/myImage.png" | relative }}" alt="My Image">
I haven't tried recreating your issue, so I cannot confirm if relative is what kept our Jekyll project cross platform compatible.
[1] https://github.com/OpenLiberty/openliberty.io
Have not found anyone complaining about this yet, but:
Have a flask app, normal static folder with js, css, and and image folder under it.
The css, js go to the web page normally from the static folder, but the images:
sky1.jpg works.
sky_1.jpg does not work. Get a 404 in chrome.
works:
img class="img-thumbnail" src="{{ url_for('static', filename='imagesUI/sky1.jpg') }}"
does not work:
img class="img-thumbnail" src="{{ url_for('static', filename='imagesUI/sky_1.jpg') }}"
Is there a file naming convention in flask that precludes any other character than alphabetic and numeric?
I want to put date info in the filename and it is not allowing it.
ubuntu 18.04
debugging under VSC
flask dev server
Debug on
Thx
Instead of src="{{ url_for('static', filename='imagesUI/sky_1.jpg') }}
use src='/static/imagesUI/sky_1.jpg'
use src='/static/imagesUI/sky_1.jpg' in img tag that might do it
I am loading data from postgresSQL database. This data is stored in the database by my python program. Not I am fetching data with the same functions I am using in my program. I want to create a bar chart before displaying it on my HTML webpage in Django. I created a chart using matplotlib and saved it on the desktop. Now I want to fetch that image and display it. I tried giving a link directly to that image but that doesn't load the picture.
According to the Django documentation:
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag to build the URL:
{% load static %}
<img src="{% static "example.jpg" %}" alt="My image">
Store your example.jpg image file in a folder called static in your app.
You can directly render the image in your python function with matplotlib. After that, you will store the image to your server. You can then can get the link and pass it to the django template. Just render the img tag with the link as the src attribute.
I am fairly new to Bolt CMS and CMSs in general. I am getting the hang of twig and things like that and have implemented a lot of dynamic content now. I am however having an issue on my timeline page in linking image assets.
I have a content type called news which has an imagelist field. I need to be able to pull the image path from the content type but when I get the raw path (ie. "files/2018-06/image-name.png") and do nothing shows up. Is something wrong here? Is this an .htaccess issue?
I am open to any and all solutions. Let me know if you need more info.
If you have an imagefield in your record you usually can show the image with
{{ record.image|showimage() }}
or
<img src="{{ record.image|thumbnail(320, 240) }}">
For more information see: https://docs.bolt.cm/3.5/templating/twig-functionality#showimage and https://docs.bolt.cm/3.5/fields/image
You can also look how it is done in one of the example themes.