I apologize for my poor English since it's not my mother lang.
I'm a newbie in web development. When I open my HTML page by clicking index.html, everything shows up correctly in my browser. But when I open via [http://localhost/SOME_DIR/SOME_DIR/index.html], the browser only shows some [div] frames and plain text. My CSS style and pics are all missing.
In WAMP, I've checked the Localhost and phpinfo() pages, both OK.
Maybe I need to open certain Apache services?
I don't know where goes wrong.
<base href="C:/wamp/www/StrangeAttractor/" target="_blank">
should be
<base href="/StrangeAttractor/" target="_blank">
You are loading the site over HTTP but you are trying to set the <base href> to your local disk. There are two problems with this:
You are using a plain file path but you have to specify the scheme (file://) in order to switch protocol
Security restrictions limit what resources web pages served over the network are allowed to load from the local disk
The solution: Load all your content over HTTP.
Related
I am trying to allow users to download a file. I took this example here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download
When I click their w3 photo I get a jpg download in Chrome.
However, when I copy their html onto my local machine into a plain static html file, I open the html file in Chrome, then I attempt to download that file, and then Chrome just opens up the photo in a different window without downloading anything. Anyone know what's the problem?
My code (which is almost the exact same):
<!DOCTYPE html>
<html>
<body>
<h1>The a download attribute</h1>
<p>Click on the image to download it:<p>
<a href="images/myw3schoolsimage.jpg" download>
<img src="images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
<p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>
</body>
</html>
I downloaded the w3 image locally onto my computer so it should'n't be a cross site origin issue
You would be better served studying almost anywhere but w3schools.
But more to your problem, are you running a webserver locally, or depending on file:/// links?
incognito mode will not impact your testing in any way.
A quick glance at google results for ‘download from file:/// link fails’ will show that there are an host of issues surrounding local file downloads and the file:/// links, especially on chrome.
This is not surprising - chrome is a browser not a web server.
Where the semantics of such ‘downloads’ are inconsistently defined for browsers, the semantics of true downloads are well defined, and their behavior consistent in a true service context.
To further both your understanding of these tools and the goals of your project, I strongly encourage you to download and install a webserver for your platform and learn the basics of it’s configuration and deployment.
You will not regret having done so.
For some reason the play button is greyed out on my Django website. I used this same exact HTML code in a blank HTML document and it worked as it should, so I don't think there's a problem finding the file, or a syntax error. While running the server locally I am not seeing any errors in the command line either.
How it looks on blank HTML file
How it looks on website
Code:
<audio src="C:\Users\zach2\music\download.mp3" controls>
</audio>
Is there something that I need to change in one of the Django files to enable audio to work properly? I am very new to Django and Web development.
You can put the file inside your server root (within a media or assets directory) instead of trying to load it directly from that path.
Local files are generally not accessible to a browser for security reasons. Else any website would be able to access your sensitive files just by guessing and putting in the most common paths.
One thing is you cannot access local on hosted website may it be local or remote files, unless you are using blank HTML page just like you did. This is because of a security concerns.
If you do want to server your media files such as audio, images, videos, etc. normally you can put it inside media folder inside your django app directory if you are handling with user uplodaded files or any non-static files.
To handle staticfiles and mediafiles in django you can refer to this link https://docs.djangoproject.com/en/3.2/howto/static-files/
I've previously explained that I was trying to link a ejs page to a jade-based app. Then after many failed attempts I tried to convert that page to Jade and still ended up with a truckload of errors. Finally, I thought about simply putting a HTML Link that would redirect me to that ejs page on click.
What I fail to understand though, is why Firefox has no problems displaying the page when I directly put its path in the browser:
file:///home/ghanem/Documents/Project/views/account/el/el.ejs
But when I try to access it from my app through a simple code, it doesn't redirect me to the same very page:
My Stubborn Link
I should also point out that I've already set security.fileuri.strict_origin_policy to false in Firefox.
What I fail to understand though, is why Firefox has no problems displaying the page when I directly put its path in the browser
Because it trusts you
But when I try to access it from my app through a simple code
Your app is "just another website" as far as Firefox is concerned. It doesn't trust it.
I should also point out that I've already set security.fileuri.strict_origin_policy to false in Firefox.
That lets XMLHttpRequest access file:// URLs providing the document it is running in was loaded from a file:// URL.
See mozillaZine: Links to local pages do not work.
user_pref("capability.policy.policynames", "localfilelinks");
user_pref("capability.policy.localfilelinks.sites", "http://localhost:7896");
user_pref("capability.policy.localfilelinks.checkloaduri.enabled", "allAccess");
How do I use a non online picture (no www.sth.com/image) in my HTML (or in CSS) site?
Normally when I use a picture I do <img src="link of image"> but how do I use a picture that I have locally on my computer?
If, for example, your image is in the directory images/image.png, relative to the HTML file
You would use <img src="images/image.png" />. This will work both online and locally.
If you are accessing the page locally then use relative URLs
If you are hosting the page on a server and visiting it yourself, then you could try to use file:// scheme URIs but you might find yourself blocked by browser security restrictions (which don't allow webpages to fiddle with user's local disks). You'd be better off hosting the image over HTTP.
If you are hosting the page on a server and letting other people visit it, then you must host the image over HTTP. Your website visitors do not, and should not, be able to access your local hard disk.
You can just enter the path of the file on your computer for the src attribute.
For example, if your image is in C:/files/image.jpg, just use <img src="C:/files/image.jpg' /> and you can also use relative paths.
But, note that this only works on your local machine and will generate a 404 error on other machines that don't have the image in the exact same location.
I have a web application.
I have inserted an image into my web application homepage using html tags.It is working very well in server machine. But when any client is accessing my web page everything that is present in the homepage of the web application is displayed except the image. Instead of image cross mark is displayed in client machine.
Can anybody help me how to display the image in client machine.
Check the path in the src attribute in the img tag. Make sure it's a relative path, and not hard coded to path on your hard drive.