I'm running a local server on my computer through a chrome extension. This is the directory it points to:
Inside my css folder, I have another img folder:
When I use the chrome extension to start a server, and inspect it with chrome developer tools, I don't see the img folder?
I'm new to web servers so I'm not sure why this is happening and why it doesn't detect it? Why web server points to web folder. Since it doesn't happen none of my images inside load?
My first thought is that maybe the server only serves the sources that are used. Try using an img from the img dir and see if it appears.
AdBlock for Chrome may cause images to be blocked based on image dimensions.
If you are using this extension, try disabling it.
Related
Here is a link to the website so you can see what is going on - https://odonnelldigital.com/
The site loads with all images on any web browser when I copy the full path locally.
So, the most common errors I keep getting from google seem to be the image file being in the wrong directory. I've tried this multiple times, but no joy.
I'm using HTML, CSS, bootstrap & JS I've hosted on GoDaddy, and I'm using the cPanel.
Even the favicon won't load! I've tried changing permissions too on the folder and the images/files themselves.
Any help would be really great! Thanks!
Problem:
Your problem is because you are trying to load a local file on your computer.
And since it is locally stored, other users on the web can't access it.
Solution:
Upload the image files, the favicon, and other files to your web server and change the src attribute to the file on your site.
You should check the path to the images in your html code. It is found in the src attribute in the image tags. If you take a look at the command console in chrome's dev tools, it states that your images point towards your C drive, which lives in your local development computer. You should put paths to the images relative to where the html file lives.
I have strange problem on Chrome for Android with local website.
It works perfect on Firefox for Andorid, but not for Chrome.
On my site here: https://passcombo.com there is download link with a zip file.
What I do is:
download file to local file system (not SSD! - external storage makes
another problem!)
I unzip the package and go to the site in local storage using File Commander
I open the html file with Chrome - only HTML loads, no CSS, no JS, no images, no fonts.
Looks like there is path problem with relative paths?
But firefox works!
Working alternative is Firefox, but there you need to write correct strange path: "file:///storage/emulated/0/..../...html"
But...
Currently Chrome is mostly used on Andorid so it's bad local sites not working :/
It doesn't work opening with file explorer, you have to write the path in the address bar file:///sdcard/Download... or wherever.
JS works with Chrome on local html file in my Galaxy S6.
The only solution I found is to:
[update 2021] use Opera (Firefox did work before recent update!)
copy folder with my html/css/js to local storage
(somewhere)
open the sitewith path like:
[current Opera] file:///storage/0000-0000/MyFolder/index.html
[old in firefox ] file:///storage/emulated/0/myfolder/index.html
where 'file:///storage/0000-0000/' OR 'file:///storage/emulated/0/' is the main path to local storage, and if you copied your folder somehwre deeper then you need to change the 'myfolder' to /somefolder1/somesubfolder/.../ sth
Shame it's the only way to create a web browser app for adroid.
It is possible using a HTTP server app on your phone.
For example the SimpleHttpServer.
Set the "Document Root" in the settings of that app to the folder in which your html files reside. Start the server and you will see a local link.
Click on that link and choose the html file you want to show.
If you declared your assets relatively those assets will loaded, too.
Seems like the only directory Chrome reads local files from is file:///sdcard/Android/data/com.android.chrome/files/Download/
The only solution worked for me in Android is the HTTP Web Server (I used Simple HTTP Server).
Installing different browsers didn't help:
(Apr-2021) I tried installing various Browsers (Chrome, FireFox, even Opera etc.) in Android but none worked. In all cases, when I navigated to the folder containing HTML/JS files using local file:/// URLs ('file:///sdcard/' or 'file:///storage/emulated/0/') browsers only displayed the folders but no files.
When I used the absolute path to the HTML file the browsers used content:/// protocol to
render static HTML content, i.e. it did NOT allow execution of JavaScript code.
In my Android OS version 7, to open a local html file with css and javascript in Google Chrome browser (ver. 64.0.3282.123) I have to open it through an address bar typing as file://localhost/sdcard/, then navigating to the file location. In spite of mention sdcard in the address, it opens an internal storage (and my device has actual removable sdcard as well).
Currently, I am also facing this problem. Chrome does not link to other files on the device, but you can use js and CSS by, using <script> and <style> tags and these will be included in the web page. But, for other files, like image, audio, videos, etc. it can't be done on Android still without any server established by 3rd party apps.
Install a text editor from playstore . Its name Acode
Got to your local file storage , then choose your .html file and press long time.
After press long time on .html file , you will see more (left side of your phone screen)
From more menu, chose open with option
Choose Acode text editor
When html file open on Acode editor, then preview it from Acode text editor.
that's all. It will works 100%.. (sorry for my english)
I tried to load some files using iframe, but it didn't work.
I want to load a file from: C:/Users/Tom/Desktop/Courses/c2.pdf and
I tried:
<iframe src="file:///C:/Users/Tom/Desktop/Courses/c2.pdf"></iframe>
but nothing appears.
How can I load local files using iframe or something else?
Thanks.
This is probably because of the Same Origin Policy: in this case the iframe is not allowed to load the resource if it is not also served from your localhost. See https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy for more info
If you're serving html from the server (wamp,xamp) you should put it to local folder relative to the server (localhost/yourfolder/yourfile.pdf). If you're just working with html it should work. I've just tested it and had similar issue on chrome. All of a sudden it started downloading pdf rather then render it. So I had to reinstall browser in order for it to work.
Is Local file mapping dev tools alternative to Charles proxy in firefox? I am trying to map a remote server resource to a local file, but it doesn't seem to be working. The console statements and changes in the JS file doesn't seem to be applied when I reload the page.
I can see the local folder and file listed in the sources folder. Also, see that the sources doesn't show the original JS file. But I see this message in the sources tab for the local file.
Workspace mapping mismatch
Rest of the warning states that the file in local folder is different from the remote loaded file. Why is that a problem, wouldn't that be always the case, since you want to edit the file locally?
What am I missing? Any pointers to fixing this? Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?
I tested this again with a simple html page with a single js file having a simple console log statement - "loading remote file ...". This file is mapped to a local js with a different log statement "loading local file.." However, I still see the log message from the remote file.
Added snapshot from dev tools sources tab for more context. Sources tab shows the local folder and file correctly, but shows the mapping warning. Also notice that sources doesn't have the remote.js file anymore.
Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?
I don't think this is accurate. When you map a file on a server to your local workingspace, Chrome acts as a sort of editor for your local files. You can edit the files through Chrome and Command+S to save your local files. But nothing has changed on the server. It doesn't update the files on the server, and it doesn't tell Chrome to "Use my local files instead of what's on the server".
What many people do is automate the deployment process so that when a local file is updated (either through Chrome + Workspace Mapping or just simply by editing in your editor), your working copy gets deployed. That way, next time you reload the browser, you'll see your edits.
Edit: From the workspace documentation:
And you can map resources served from a local web server to files on disk, so when you change and save those files, you can view them as if they were being served.
I think the key here is local web server. I did a bit more digging and found this dev tools docs issues, with a comment effectively saying that what you're trying to do isn't supported:
The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.
Looks like you'll need a way to deploy after making changes or have your devtools workspace point to the server docroot.
The Charles Proxy "map local" feature was requested of the Chromium team in this issue and the team declined to pursue it.
I'm encountering an issue with some local web prototyping;
I've been working on a single page which access files on my C:/ by starting my Chrome with --allow-file-access-from-files.
This is great, I've got my first page working successfully and it loads in my .js,.css files etc as expected.
However, when I click the link to proceed to the next page, the HTML loads, but none of the styles, javascript (or even images) load.
I'm receiving 'Failed to load resource' errors in the console, despite the file:// url pointing to the correct location.
Is there any way around this issue?
In lieu of a solution, some advice: Set up a web server on your computer for testing. Developing in an environment that's similar to a "production" environment, as opposed to working around the quirks of local file access, will save you quite a bit of time in the long run.
There are a number of tools that will help you set up a development web server; XAMPP is a popular one.