Image fails to load on website but loads locally - javascript

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.

Related

Downloading loaded webpage as html

I'm new here. My problem is I got a loaded tab on chrome and the webpage is not accessible anymore.
anyway, the page contents are still on the server at least thumbnails.
Is there a way to download this tab entirely with its page structure as HTML for viewing later.
I don't turned off my pc for 2 days only hibernate it. Searching for a way but can't find any resource.
edit: the webpage is a meganz folder which has ~100 folders on it. i think it's very hard to download with page structure because it loads a file explorer application (server-side i think) when first loading the folder and files.
Either File > Save Page As.. (in Chrome)
or
FTP into the web server and download the whole folder/page from the public_html folder, if it is a static page. If it's not, you'll only get template files, and no content data.
or if you're just interested in reading the content:
File > Print > Save as PDF

Issue with uploading website to hosting

I tried uploading my website to the free 000webhosting service. My website loads fine locally, but when uploading it through FileZilla and reloading the page I get an error that says "The jQuery library must be included before the smoothscroll.js file. The plugin will not work properly."
I have a smooth scrolling javascript file and some jquery in my code that I got from somebody else. Does anybody have any idea why my website loads fine locally, but the smooth scrolling doesn't load when uploading my site to a host? And yes, the jquery is before the javascript.
Try to check for your problem:
The files don't exist on the server at all at that path
You moved the files but didn't change the path in index.html
You changed the path in index.html but didn't move the files there
Try checking the files of the particular plugin on the hosting server.
There must be some files that are missing or not uploaded completely.

Folder in directory not showing up in local server html

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.

Setting src of an image to a Chrome's extension stored file?

This is an example that shows what's my problem.
I'm writing a chrome extension that should replace google's logo in google main page (google.com). So I create a content-script that uses this javascript+jQuery code to do it (Please forgo google doodles!):
$("#hplogo").attr("src","the_address");
This content-script matches with https://*.google.com/ which contains google's main page.
Okay. If I put in the_address an image address which is uploaded on the internet, the extension works properly and gives me ideal result.
But since I don't want my extension to make loading time long for slow connections, I'm going to set the image's src to a file from hard disk.
So I put the image file to extension's folder then I tried the file name (eg : image1.gif) as the_address, but this time, the chrome doesn't load the image.
What have I to do? Thanks, gúys.
For obvious reasons the image won't load, I assume it is still using the webpage's domain. You may need to use chrome.extension.getURL, which allows you to link resources from an extension directory.

Remote image source not displaying in phonegap

I am trying to do something very simple. I want to display an image hosted on a remote server in my phonegap app. I have tried everything I can think of.
• I've tried simply writing an absolute file path to an image tag in the markup
• I've tried using javascript to write html into the markup to do the same after the device ready function is called
• I've tried using html canvas elements to do it.
All of these methods work if I reference an image in a local directory in my www folder but nothing works if I try to use a src such as "http://www.somewhere.com/image.jpg"
Does anyone know whether there is a setting in xcode ios simulator or a something in phonegap that is preventing this???
I figured this out: Go to the PhoneGap.plist file in the supporting files directory, and add an ExternalHosts node for a wildcard domain, e.g. google to use the static GoogleMaps API.

Categories