I have a static image cache problem in the browser.
I am displaying an image from the static folder in my project and when I change the content of the image without the image name change, the browser cannot detect it.
I want Nuxt to cache this image based on the modified date, or somehow detect this change and display the image over. is there a solution to this?
Actually nuxt does this out of the box - at least in the production builds and when you load the images from the assets folder.
For assets in the assets folder, webpack generates a hash and appends it to the filename at build time. If the content of the image changes, the hash changes as well. This way the browser knows when to load the updated image from the server.
Check here for reference: https://nuxtjs.org/docs/directory-structure/assets/#webpack
The static folder is not processed by webpack by default and therefore the hash is not added to the filename.
So try to make use of the assets folder, then the caching problem should be solved.
Related
I'm new with Laravel's framework, so correct me if i'm mistaken.
I have set up some templates with some assets (css and js) in its corresponding folder:
SASS and JS goes inside resources/sass and resources/js respectively, which then gets compiled into public/css and public/js
Views go into resources/views, and then i have set up some routes inside routes/web.php
If you want me to add some more information i can for sure add it.
Image of console network debugging
Please, ignore images time load as I dont care the loading of them cause they load after DOM.
What I'm asking here is: why is every .css file or .js file taking more than a second to load?
Solution found
Seems like xDebug was causing strong loads in my page, commenting it fixed it.
I downloaded a binary via docker for the Gogs project (https://github.com/gogits/gogs), set it up (via docker pull gogs/gogs) and the server works as expected. Now I'm trying to customize the html a bit to look consistent with our company's other tools. When looking at deployed project, the assets of interest are in the following directories:
public/img/*.png
public/css/*.css
templates/*.tmpl
When I update the css, changes take effect right away, when I update tmpl, I need a container restart (implying that html is generated at server start time), when I update anything in public/img/ directory, however, I can't seem to get those assets used at all and I'm clueless about what's happening since most web servers/frameworks treat public/img/ as a static directory with all of its contents publicly visible by default.
Here is what I've tried so far and the outcomes:
Action: copied a new favicon image (my_favicon.png) into public/img/ and changed /templates/base/head.html to point to it (/img/my_favicon.png) instead of the original (/img/favicon.png), left original untouched and restarted the container.
Result: page loads with broken image icon, DOM inspector says that it's pointing to /img/my_favicon.png but doesn't show the image, going to that URL directly doesn't show the image either.
Action: change .tmpl back to point to original image (/img/favicon.png), overwrite original with the new image. I tried this with the main lg-gogs.png logo too.
Result: page loads with broken image icon just like before.
A grep search for image name revealed that only the .tmpl I modified and config.codekit are mentioning it (and I'm not at all familiar with CodeKit, but the instructions claim that it's only relevant for git, not me, and to leave the file alone, although it seems to profile names and sizes of all images - however I don't see anything else on the server reference this codekit file).
I have no idea why changes to css and tmpl work fine, but images cause this unexpected result. Does anyone have an idea of what's going on, why the server isn't accepting the images?
I have an iOS app that contains a UIWebView, which display a webpage. Sometimes the page displays a different image than the one associated with the src link.
A user sent me a screenshot where it was clear that one of the icon images had been replaced with a completely different image. The same wrong image was displayed in each of the instances where this icon was supposed to be displayed. Refreshing did not solve the issue, but closing and opening the app did. (Or maybe she actually deleted and reinstalled the app.)
The html for the icon is just an img:
<img src = "/the_icon_source">
The img src is hardcoded directly into the HTML file. I therefore don't see that the HTML itself could have been wrong or said anything besides "/the_icon_source".
So how can the wrong image be associated with an image src? Could the server be sending the wrong image when it's asked for "/the_icon_source"? Could the iOS app be caching incorrectly, mixing up images? How to test and fix?
I myself cannot reproduce this issue. I'm not sure how often it occurs, but several users have mentioned it, also for other images on the page. They have only mentioned it occurring in the app, not on the website. This may just be because the app is used more than the website.
My host is Webfaction and the images are served using WebFaction server’s static-only front-end nginx process. The app displays the website in a UIWebView. (Webfaction suppprt merely told me that they served the right images.)
Is the problem not that you have it like this:
img src = "/the_icon_source"
rather than like this:
img src = ".the_icon_source"
If this is sat on a linux server the / will be pointing to the root directory whereas the . or simply the_icon_source would simply point to the directory in which the website is sat which i assume is where the image is also located.
I am creating a project wherein the user can upload his photo. This photo is stored in the folder "images/uploads/filename". When his profile is created and the photo is to be shown, I use the <img> tag with src as "images/uploads/filename", but the photo does not show up.
If I manually copy the photo to an adjacent folder "images/abc/filename" and then use it as the source then it works.
How is this caused and how can I solve it? I need to use the same folder to upload and download photos.
That can happen if you're running the webapp as an IDE project and are storing the uploaded images in the IDE's project space. Changes in the IDE's project folder which are performed externally (as by your servlet code) does not immediately get reflected in the deployed server's work folder. Only when you touch it (by refreshing the project) or by copying it (as you happen to have found out), then it will get reflected.
After all, storing uploaded files in the webapp's deploy folder is a bad idea. Those files will get all lost whenever you redeploy the webapp, simply because those files are not contained in the original WAR file.
You need to store them somewhere outside the webapp's deploy folder on a different fixed path like /var/webapp/uploads. You should not use relative paths or getRealPath() to create the File object around it. Just use a fixed path. You can always make the fixed path configureable as a context param setting, a VM argument, a properties file setting or even a JNDI entry.
Then, to serve it to the world wide web, just add exactly that path as another docroot to the server config. It's unclear what server you're using, but in Tomcat it's a matter of adding another <Context> to the server.xml.
See also:
Uploaded image only available after refreshing the page
How I save and retrieve an image on my server in a java webapp
Make sure your have the correct path and include the image extension
just for testing, put your img tag inside the index.php
<img src="images/abc/filename.jpg">
/root/index.php
now put you image in to the your abc/ folder
/root/images/abc/filename.jpg
This should display the image.
if you have your img tag inside another folder in the root like below
/root/user/index.php
now when you use you img tag use this path (relative link):
<img src="../images/abc/filename.jpg">
note the beginning of the image path "../" this is used to go back to the root.
if the php or html file that is holding the img tag is even deeper, just remember to add ../ for every level, 2 folders deep whould be:
<img src="../../images/abc/filename.jpg">
Question was quite vague so hope this is what you are looking for.
let me know and if this is wrong, explain a little more and i will try to help :)
I want to change some CSS properties and HTML content from a random web, so I download and save the html file in the device and load it in a UIWebView to modify it.
The problem occurs when the html has referenced stylesheet/javascript files and they aren't loaded in the UIWebView.
Is there a way to access automatically to these files?
I've thought of getting the path through javascript and add the web url to it, and then download... but first I'll have to check if the path is relative or absolute and that...
Is there an easy and clean way to do this?
(I have the same problem with the images that are not url linked...)
Any idea would be appreciated :)