I have a few images that are already in .webp format.
/public/images/Image.webp
and they work on my dev local environment but when I build and view the static site the image fails to show.
<picture>
<source
srcset="/images/architect/Header-Image.webp"
type="image/webp"
/>
<img srcset="/images/architect/Header-Image.webp" />
</picture>
Image of file location:
/public/
images/
architect/
Related
I have been trying to configure my app.yaml in the Google Cloud Platform.
I would like to achieve two things:
redirect all URLs (except images) to the main index.html in the root folder. For example, example.com/abcd should be redirected to example.com.
load any image requests from the folder named "mypics".
Here is my existing app.yaml file.
runtime: python27
api_version: 1
threadsafe: true
handlers:
# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: mypics/\1
upload: mypics/(.*\.(bmp|gif|ico|jpeg|jpg|png))
# URL redirect
- url: /(.*)
static_files: index.html
upload: index.html
I have managed to get the redirects working. However, the images are not being loaded. I have reversed the order of the handlers, which does not seem to make a difference.
If I try to load the image directly, I get the following error:
Error: Not Found
The requested URL /mypics/Diamond.png was not found on this server.
Thanks for your help.
I suspect it has to do with how you specify the path to your images in your template files (i.e. html files). Let me explain with the result of the test I did on my machine
Previously,
Folder structure
Project Root
static
images
image_1.png
image_2.png
css
app.yaml
- url: /static
static_dir: static
Code in index.html file was < img src="/static/images/image_1.png" alt="Image 1" >.
The above worked (i.e. images were properly displayed)
Then I changed to your code
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: mypics/\1
upload: mypics/(.*\.(bmp|gif|ico|jpeg|jpg|png))
The images were no longer displayed. I also tried
- url: /static/(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: mypics/\1
upload: mypics/(.*\.(bmp|gif|ico|jpeg|jpg|png))
but the images were still not displayed.
I then went back and modified the routing in app.yaml to
- url: /static/images/(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: mypics/\1
upload: mypics/(.*\.(bmp|gif|ico|jpeg|jpg|png))
The change here is that I specified the full path I used in my index.html i.e. static/images/ and the images got displayed again
i use responsive-images https://pypi.org/project/django-responsive-images/
on my PC django works well and also django-responsive-images when i move all up to my website responsive images dosen't find images
in my template file if i use
<img class="card-img-top" srcset="{% srcset item.img 200x400 400x800 nocrop %}"
src="{% src item.img 400x800 nocrop %}" alt="Card image cap">
i get that error it seems dosen't find file
FileNotFoundError at /
[Errno 2] No such file or directory: '/code/uploads\\Item\\0\\817_img.jpg'
Request Method: GET
Request URL: http://www.mysite.it/
Django Version: 3.2.5
Exception Type: FileNotFoundError
Exception Value:
[Errno 2] No such file or directory: '/code/uploads\\Item\\0\\817_img.jpg'
Exception Location: /usr/local/lib/python3.9/site-packages/django/core/files/storage.py, line 238, in _open
Python Executable: /usr/local/bin/python
Python Version: 3.9.4
Python Path:
['/code',
'/usr/local/lib/python39.zip',
'/usr/local/lib/python3.9',
'/usr/local/lib/python3.9/lib-dynload',
'/usr/local/lib/python3.9/site-packages']
Server time: Tue, 25 Jan 2022 14:16:46 +0000
but if i don't use responsive images it works
<img class="card-img-top" src="{{item.img.url}}" alt="Card image cap">
do you know why it dosen't work?
ok i found a solution, maybe is a bug for django-responsive-images
on some OS there is no problem if image path inside database is:
media\images\myimage.jpg
or
media/images/myimage.jpg
but in other OS ( like unix in raspberry pi ) django-responsive-images works only if path is with / so when it try to modify/copy an image he founds it
(instead on Windows a path / is same as \ )
note: for Browsers there is no difference for :<img src="media\images\myimage.jpg"> and <img src="media/images/myimage.jpg">
so in a template if image.path have wrong slashes like media\images\myimage.jpg on unix/raspberrypi only works [1] img tag, instead on windows both works
[1]<img src="{{item.img.url}}">
[2]<img src="{% src item.img 150x300 nocrop %}">
I am trying to use fonts Awesome on my Rails 4 application. The fonts works very well on Development, But on Production is not working.
Assets are precompiled on the server while deploying with capistrano.
All CSSs files, JS (at app/assets/* and vendor/assets/*) are working... only fonts are not.
If I run the application on my development machine as production, it works:
RAILS_ENV=production bin/rails s -b 0.0.0.0
Only when I send to my production host (VPS with Passenger+Ngnix), that the fonts dont works
what I have is:
# config/initializers/assets.rb
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/
And...
# config/environments/production.rb
# ...
config.assets.compile = true
Ad finally:
# app/assets/stylesheets.css.erb
#font-face {
font-family: 'FontAwesome';
src: url("<%= font_path('Font-Awesome/fontawesome-webfont.eot') %>?v=4.3.0");
src: url("<%= font_path('Font-Awesome/fontawesome-webfont.eot') %>?#iefix&v=4.3.0") format('embedded-opentype'),
url("<%= font_path('Font-Awesome/fontawesome-webfont.woff2') %>?v=4.3.0") format('woff2'),
url("<%= font_path('Font-Awesome/fontawesome-webfont.woff') %>?v=4.3.0") format('woff'),
url("<%= font_path('Font-Awesome/fontawesome-webfont.ttf') %>?v=4.3.0") format('truetype'),
url("<%= font_path('Font-Awesome/fontawesome-webfont.svg') %>?v=4.3.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
The fonts are located at: vendor/assets/fonts/Font-Awesome/fontawesome-*
What I dont understand is that on Development it works and I have another app on Heroku with the same configuration and the fonts works very well.
If I go to my server using SSH and run ls my_app/public/assets, I can see all my assets (css, javascripts and fons) pre-compiled.
What I am missing?
I tried a lot of solutions, but nothing worked..
The only one that works was move the folder "fonts" from vendor/assets to app/assets.
This don't make sense to me, as I know, third-party assets must go to vendor/assets folder.
But the third CSS and Javascript files, are located at vendor/assets/* and works fine. Only fonts files that wont work.
I can not see my static files when running the project on the server (at my desktop it was ok).
When I look for the picture path on my browser I have
/static/app_name/images/image_name
My images are stored at
www.mydomain.com/xxx/xxx/static/app_name/images/image_name
I tried to adjust the settings.py from
'/static/'
to
'/xxx/xxx/static/'
But it seems to have no effect as the images path on my browser are still
/static/app_name/images/image_name and not /xxx/xxx/static/app_name/images/image_name
Am I missing something here?
Thanks for any help!
Changing STATIC_URL = '/static/' is only going to change the URL, not where the images are actually served.
Make sure that STATIC_ROOT is pointing to /path/to/www.mydomain.com/xxx/xxx/static/ and make sure you are using hard-coded paths in your settings.py, not something like
os.path.join(os.path.dirname(__file__, 'static'))
Then in your templates
<!-- either -->
<img src="{{ STATIC_URL }}img/my_image.png" />
<!-- or -->
{% load static %}
<img src="{% static 'img/my_image.png' %}" />
Also, be sure you're running python manage.py collectstatic to collect all of the static files from all of your apps to place them in the STATIC_ROOT directory.
Also
Depending on which server you're using, make sure you have a path alias that points to your static directory. For example, in Apache in your /sites-available/www.mydomain.com conf make sure that this Alias directive exists
<VirtualHost *:80>
...
Alias /static /path/to/www.mydomain.com/xxx/xxx/static/
...
</VirtualHost>
I'm been using Django Compressor to manage my coffee/less files and its great for development, but I've had some issues to make it work for my production deployment.
My idea is to have apache to host the static files, possibly in another server. I'm setting COMPRESS_OFFLINE = True on the settings.py file.
Then I do the following
python manage.py compress - This populates the CACHE directory in my static directory, where all static files will be collected.
python manage.py collectstatic - This collects static files from all the apps on my project (some of which don't use compressor) into my static directory.
Copy the static directory somewhere to be hosted with apache. And setup apache to serve the files.
Modify the static_url variable in the settings.py file to point to the static server.
If I open any page, I get the following error on my server, this only seems to happen when I have DEBUG = False and COMPRESS_OFFLINE = True on my settings.py file:
TemplateSyntaxError: Caught OfflineGenerationError while rendering:
You have offline compression enabled but key
"777ba26736d046ab043dc151e7e9a060" is missing from offline manifest.
You may need to run "python manage.py compress".
When I check the static/CACHE directory, I confirm what the error says, this is my manifest.json file:
{
"6189b8598993d1cbdbd35d4dfd1a6711": "<script type=\"text/javascript\" src=\"http://192.168.1.123/CACHE/js/2f6ca6616bd6.js\"></script>",
"5c66dbed0e5b766c6e32773cd8585f3c": "<link rel=\"stylesheet\" href=\"http://192.168.1.123/CACHE/css/154d95903951.css\" type=\"text/css\" />"
}
If I delete the CACHE directory and rerun python manage.py compress, I get a new set of ID's both on the error message and the manifest file, but the ID on the error is still missing on the manifest.
So, I guess there are two questions here. Why is it not working? What is the proper way to achieve this?
Thanks.
If you've run compress, and you still get the message
OfflineGenerationError: You have offline compression enabled but key "4971a40e3b459a8cda8287a7f7caa96d" is missing from offline manifest. You may need to run "python manage.py compress"
then it's likely you have dynamic content inside compress tags. Make sure that compress is always the innermost block, and that there are no tags inside the compress block.
I guess you're using django-compressor 1.1.2 which doesn't support static template tag {% static "..." %}.
Try installing the dev version of django-compressor with:
pip install django_compressor==dev
It should solve the problem.
David Wolfe is absolutely right: had to dig throught all the code of mine to get rid of {% trans... etc.
I make it like this:
<script>
window.__enter_email = "{% trans "Enter correct email" %}"
window.__url = "{% url "shop:go" %}"
</script>
{% compress js %}
<script>
$("#bla")..... window.__enter_email ...
</script>
{% endcompress %}
Hope, helps someone!