Use raw URL or static URL for images? - django

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.

Related

Image in static couldnt be found without using CSS under Django frame

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

Referencing Django's versioned static resources

When I run python manage.py collectstatic, it makes a copy of each image, JavaScript, and CSS file with a hash in the filename:
Post-processed 'css/theme.css' as 'css/theme.afeb1fc222a9.css'
Post-processed 'css/custom.css' as 'css/custom.585e1b29ff9a.css'
...
I'm assuming this is just a way of making a versioned filename for better caching; the client or CDN can be told to cache this file indefinitely, because if I make a change, the hash will differ, and I'll just reference the new version by the new name.
However, I'm not clear on how I'm supposed to reference this URL. The documentation on serving static files just says,
In your templates, either hardcode the url like /static/my_app/example.jpg or, preferably, use the static template tag to build the URL for the given relative path by using the configured STATICFILES_STORAGE storage (this makes it much easier when you want to switch to a content delivery network (CDN) for serving static files).
I went through my templates and dutifully switched every static resource (including the CSS files) from a hardcoded URL to a {% static "..." %} template tag, assuming it would map to the versioned filename where appropriate. But it doesn't.
I'm also using WhiteNoise for serving the resources, and I'm not entirely sure how it affects things, but it also says,
Want forever-cacheable files and compression support? Just add this to your settings.py: STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
But I have that in my settings file and it also doesn't seem to do anything with these versioned filenames.
If DEBUG is True then the static url will be 'css/theme.css' instead of
'css/theme.afeb1fc222a9.css'

Getting WebPage to use a specific URL to download HTML resources

I have a Qt program that downloads webpages (HTML), parses them and then generates its own HTML which is then displayed with QWebPage. Some times the HTML that I download contains IMG tags, which work fine when the src attribute contains a full URL. However, some times the IMG tag might use a relative path like:
<IMG SRC="images/foo.png" />
Since I know the URL that should be prepended to the SRC my first thought was to just tack it onto my resulting HTML when I'm parsing. However, this is proving more difficult than I anticipated and now I'm wondering if there's a better way.
If there any mechanism/property with QWebPage that I can say "use this URL for relative paths"? Or maybe someone can suggest a better way to accomplish what I want?
Thanks!
In the comments, you mentioned that you're using QWebView::setHtml(). The second, optional parameter of this method sets the URL to use for resolving relative paths. According to the documentation:
External objects such as stylesheets or images referenced in the HTML
document are located relative to baseUrl.
Setting that parameter should be all that's needed here.

Difference between "load static from staticfiles" and "django.core.context_processors.static" in Django

As I am learning about how Django handles static files, I have seen two different ways of serving static files while still allowing portability.
One way is to do the following in the template:
{% load static from staticfiles %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />
as documented here on the Django docs.
The other way I see is to load the context processor for static files, and then use
<img src="{{ STATIC_URL }}images/hi.jpg" alt="Hi!" />
as noted here on the Django docs. When using this method, I change STATIC_URL based on
if DEBUG:
STATIC_URL = 'localhost'
else:
STATIC_URL = 'some_static_server_url'
Which is considered better practice? Is one way better than the other? For example, this SO question has both methods as answers, and this one has the second method. Any insights would be helpful.
Both methods are essentially the same when using Django's default StaticFilesStorage. Both methods are ignorant of any actual files. Both methods just join together the STATIC_URL setting and the actual file path.
There can be a difference when using a custom file storage backend. If you need flexibility, e.g. if some files are stored with different static urls, you can override the backend's url method to return an url based on the actual location of the file. That won't be possible using the STATIC_URL setting. However, this situation is quite rare: most servers store their static files in a single location either on the same server or with a third-party service.
When you define the STATIC_URL setting and the static files are on the same domain as the website, it's better to define it as a root-relative url, e.g. '/static/'. This increases portability and is less likely to cause errors. You will no longer have to worry if you have covered all systems where the code can be deployed.

Referencing images from template

I want to insert an image into my template. The image resides in the same folder as the template.
I tried:
<img src = "imageName.png" />
but for some reason, this wouldn't work.
Does anyone have an idea why that is?
Don't put images in the same folder as templates. Images are a part of static content. You should read about managing static files in django.
Hope that helps.
I'm guessing you're new to the whole django scene, so don't be afraid to hit a few boulders on the way. In fact, this is a problem that I faced too, since I just usually put everything on a web-server, with an index.php file (yes, the horror), and everything was just relative.
So, let me give you a little context, what you are trying to embed on a page is called a static file. What that basically means is a file that does not change, a file that is not dynamic. Now, since these static files require no processing, they are treated specially, and are put inside a static folder. You can see where your static folder is when you check your main settings.py file.
Now often, people make a lot of mistakes with static files, because there are so many variables that have a STATIC infront of them. I know, its totally counter-intuitive, but there are reasons why they're there. So, let me direct you to something that can be a little help in understanding this whole fiasco.
When using static files, you usually use a few special tags. You can learn more about them here. But, I'll just show you how you would embed your image into your html, just as a sample.
{% load staticfiles %}
<img src="{% static "images/myphoto.png" %}"/>
So, how should your directory look like? Well, what you would have is something like this
STATIC_FILES_FOLDER > IMAGES > myphoto.png
Hope that helps.