HTML website can't find my PNG images once uploaded to server - html

My website works perfectly on my local drive; I can see all my images with no issue. However, when I upload the website via FTP to be live, it suddenly can't see the pictures. I compressed the images, brought in the entire folder zipped, brought in every image separately, uploaded multiple methods... Nothing works. After a lot of digging, I realized that (as shown in the image), the website seems to think that the pngs are text/html files, which explains why they aren't being found. how do I fix this???
Edit - Perhaps someone could just figure out why the website is trying to identify .pngs are text/html files.

Can you give full image URL
For Example :
Now your image url is :
G4C_1.png .
you need to change like :
http://example.com/assets/G4C_1.png

Related

Uploading image on JS fiddle

I was wondering how I could upload a picture on js fiddle in one of my divs.
I tried to save an image to my files and i tried to pull the image from my files yet my code could not recognize the file name.
Perhaps some of these earlier comments might help (one person clarifies how to load your own images at JSF):
Stackoverflow post
JSfiddle Docs
Some other external image services examples (there are plenty out there):
Placeholder.com
Unsplash via their free images
Another possible way to upload your images is via PostImage which will host it free there, then you can link it onto your web page.
PostImage

Truly undownloadable images

I had given up on protecting online images since even disabling the easiest ways to get at images still left people the option to use Inspect, then Sources, and poke around in the folders until they found the right file, hey, presto.
The only real way to get around that was to break the image up into tons of fragments so you're just depending on people not being able to code and getting bored with the idea of putting the image back together.
This site, however, has a public domain image that has somehow truly blocked the Inspect hack: The image appears within Inspect (d7... folder, 3rd image) but any attempt to open or download that image just produces useless "download" files instead of the actual image. How'd they pull that off? and why isn't it more common? How expensive/time consuming would it be to implement for online image databases?
The image appears within Inspect (d7... folder, 3rd image) but any attempt to open or download that image just produces useless "download" files instead of the actual image.
I managed to download it (using qutebrowser) by opening in new tab. The filename was qwe_download.
When i opened the image in my file manager (Thunar), it showed as WebP image.
I used feh (image viewer) and it was exactly the image.
Maybe use WebP compatible image viewer to open the file.

Some weebly features don't work when exporting to HTML and hosting on a different server

Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.

Images Not Displaying on HTML Index Page, but Show up on All Other Pages

I have quite the conundrum. Background- I have a webpage I made for fun as an easter egg for an internal site on my company's network. The index page isn't rendering the images and it's giving off a 404 not found error, even though I've triple checked and they're in the appropriate directory and I can open them up and view up without issue.
Pages that are linked to the index page DO get their pictures rendered. The webpages and the pictures are both in their own directories so I'm really not sure what could be going on. The tag is correct as well as the file name.
For example-
On my index page I have <img src="pics/opslogo.jpg"> which should point to http://[internal site]/html/Old_Ops_Website/pics/opslogo.jpg, which it does according to the page source, but it doesn't render even though I know the picture is in there.
On a separate page I have <img src="pics/connection.jpg"> which should point to http://[internal site]/html/Old_Ops_Website/pics/connection.jpg, which it does, and it DOES render correctly.
Interestingly enough the pictures that won't render when hitting the site from the network DO render correctly on the host machine itself.
Here are the paths, taken from "copy-shortcut", to the images from the non-working page and a working one, respectively-
http://[internal site]/html/Old_Ops_Website/pics/ops-logo.jpg
http://[internal site]/html/Old_Ops_Website/pics/connection.jpg
Given those pieces of information, I'm absolutely bewildered as to why this isn't working.
Not sure if it makes any difference but the actual root of the website is located in "C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT" while the page I'm working on is located in "C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT\html\Old_Ops_Website". Both directories have index files.
I tried changing the index file to "test.html" and hitting it via "http://[internal site]/html/Old_Ops_Website/test.html" with the same results.
Also tried "<img src="./pics/opslogo.jpg"/>", just in case, but no-go still.
Next steps taken-
Ok so I tried it with the images that I know for sure to be working on other pages and they show up on the index page as well. I still don't understand why the others won't show up since all the images are located in the exact same directory and when viewing the website from the host server all images render correctly. Next I tried to link the images that aren't working to one of the other pages and they don't work there either. I've triple checked and the images are definitely in the right directory and in the correct format and I can open them up and view them.
What could be causing these specific images to not render on any of my pages, yet they render perfectly from the host machine itself?
Edit, more details-
I went ahead and set the site up on my public dev server- here. As you can see here- pics the photos are in the correct directory, the HTML page is referencing the correct images, but nothing is coming up. FYI - I didn't create this site. This is about 10-15 years old which is why I'm hiding it on our current site as an easter egg for people to get a laugh at.
don't you realize your file name is wrong.
try:
<img src="pics/opslogo.JPG"/>

Website images links work locally but not on server

I have a website that has many thumbnail images on it with links to bigger images for each one.
These fullsize images work offline, but when I upload them to the server they will just keep loading.
If I attempt to see the image directly it gives me a 404 error.
This is the website here: www.weissidian.com
What the image looks like when i attempt to go to it:
I'm not sure why it would be doing this.
Thanks before hand.
It looks like you didn't specify the URL correctly. The URLs are case-sentitive on your server and are case-insensitive on your computer.
For instance with http://weissidian.com/core/img/gallery/fullsize/digital/Shepard.jpg you are linking to the directory digital which doesn't exists. (I guessed because there is no Forbidden message.) When I try Digital (notice the uppercase D) it works fine.