While using FlowRouter if I load my page any locally served images (images/myImage.png) works fine. But if I navigate to a page and then navigate back (home page -> about page -> home page) the image is broken. However in the developer console, if I hover over the image source, the image appears fine.
This is not an issue with images served from another server.
Update
I never solved this issue, but because this still seems to be an issue with many people. I'm posting my work around. Based on the Meteor communities advice, I switched to cloud based image hosting like Cloudinary or AWS
It sounds like you are sometimes accessing images using their file paths. With Meteor, to serve static files properly, they need to be in the /public folder of your project. So you should put them in /public/images, and then reference them according to the following example:
The file
/public/images/foo.png
is displayed by
<img src="/images/foo.png>
See here: https://guide.meteor.com/structure.html#special-directories
I realized that although my images worked with the following:
Image is in /public/images/name.png
<img src="images/name.png">
But then I changed the url to:
<img src="/images/name.png">
Now it works and doesn't break.
Related
My CSS changes are not showing once I upload to FTP. HTML changes show just fine. This is the web page in question:-
Activ Physiotherapy
Hosted with 1and1 and recently had an SSL certificate installed. I think it is an APACHE SERVER.
I have tried caching, deleting history and cookies and no luck with that. I deleted css file from root and the website still had all the css styled correctly as if the css file was still in the root.
I think something is wrong with my FTP but I do not know what to be able to fix it. It is like it is getting uploaded to the wrong webspace.
I should also mention that the changes work just fine locally in all browsers, just nothing when uploaded via FTP.
I just wanted to offer an update in case anyone goes through the same thing. It is a caching issue however the hard refresh and clearing cookies etc was useless for me.
Therefore in the end I added a string to the html tag in the . Like so:-
"styles/activphysiotherapy.css?v1"
This has forced the cache immediately.
I have a single page application that does not use hash URLs I want to use the history API. I am using the middleware historyApiFallback() in browserSync server options. However, this is only working for one level deep URLs:
http://localhost:3000/main correctly resolves to index.html
BUT
http://localhost:3000/main/a is NOT working. The browser shows "connected to browser sync" and then a blank page is displayed.
Anyone knows what could be the issue here?
The issue was that the URLs for js and css resources weren't correctly setup. This post helped me fixed the issue: mod_rewrite to index.html breaks relative paths for deep URLs
So I am currently working on a website where the images are hosted in the following location.
www.website.com/resources/images/products/imagename.jpg
when I type in the following url this works.
localhost:50836/resources/images/products/imagename.jpg
The following doesn't work and gives me a 404 error
www.newurl.com/resources/images/products/imagename.jpg.
I have logged into the ftp to make sure that the images are there are in the order of:
projectname/resources/images/products/imagename.jpg
I am currently working on redoing their site, taking nothing from the old site except the images. On the new site I have put the resources folder in the same location. However when I try and view the image on the new site I get a 404 error. It is important that the images are in the same location because the images are used in other locations.
I had to add the following code to the Web.config in order to allow the images to be accessed.
<bundle virtualPath="~/resources/sample" transform="System.Web.Optimization.JsMinify, System.Web.Optimization">
<content>
</content>
</bundle>
I have a page which works locally but when deployed, none of he CSS works. in Firefox I get these errors. I never used to get this before. Any idea why this may be happening?
Also, when viewing the source of the page I can see this
<link href="/Content/css/foo.css?v=1.0" rel="stylesheet">
The resource from this URL is not text: http://foo.iat.company.local/Content/css/foo.css?v=1.0
</link>
The errors you're showing in console seem to suggest that the first line of your JS files is <!DOCTYPE html>, which it shouldn't be for JavaScript files!
I suspect that your links to the stylesheets aren't working and it's instead returning a 404 page (the screenshot certainly seems to suggest it's returning a document with HTML in it).
To try and double-check:
open up the page in Firefox and view source (right-click and 'View
Source');
In FireFox source view the assets URLs will be hyperlinks;
try clicking on the link for one of the JS files and see what gets
displayed.
I suspect you're going to find it returns you an error page and not the JS you expect!
If that's the case, you need to take another look at your folder structure and try and work out why your markup is pointing at the wrong place.
Check what your CSS files stored in correct place. Try open URL to CSS in browser. Also check in Firebug in tab Network what files loaded and from what URL. There is similar to your pages tried load CSS files from incorrect URL and got page for 404 error.
The problem was that the Content folder didn't have permission that it required. I added he following users to the security tab of the properties window of the Content folder and set permissions for those users and it all worked fine.
creator owner
iusr
network service
users
iis_usrs
hai,
i am getting the images in my localhost.But when i am uploading my project the images are not displayed.
I am saving my images in "~/App_Themes/darkOrange/images/button_line.jpg".
Is their is another method for giving image path in ASP.Net.
please help.
thank you.
Yes - check what is actually getting rendered out in the "src" attribute for the images. See if you can physically get to that file, if you cant, means the webpage cant. Have you confirmed the images have been deployed to the web server (not local - the server you uploaded to).
If not, make sure the "Build Action" for the images are set to "Content" in the properties window in Solution Explorer.
I faced a similar problem once. But, that was just a static website. Where the images were displayed in localhost but when I ftp files to the server, the images wouldn't show.
Later, I found out that it was becasue of the different case. For e.g - The image file name was "Image.JPG" and I had used "Image.jpg" in my code
Just check if this helps.