Images not working

[I.m.learning]

I am pulling my hair out trying to figure out why my images are not showing up after uploading to my host’s server.

I use File Explorer (FE) to set up my pages, these work fine doing this; however, when uploading to the server, the images are not working.

The path was throwing me off; therefore, I simplified it and placed the images directly in the same folder as my index.html is located.

This means, to reference the image, I should just use URL(body.jpg). However, my images are still not showing up in the page.

I have used url(
‘body.jpg’
“body.jpg”
body.jpg
)
none of these work.

The only thing I am thinking is to use .png instead of .jpg
It shouldn’t matter what the format is…does it?

This type of issue is “Beyond our scope” for my hosting company name.com
As I stated, these codes work fine in FE, but fail upon loading to the server.

***I just remembered too:
my website is different using other browsers.
While IE 11 displays my image and shows the exact animation;
Chrome displays the image, but displays a different animation
Firefox has a different animation than the other 2, and does not show my image.

Ummm, what the… is there some code I am missing.

Right now, give me ideas, if we need to delve into further, I can post images, or code, wherever (this means I can also put the images onto my website for you all to view).

I’m looking for help in any way possible. I have spent over 1500 hours in the last month getting my site to either view as it is now, or finding solutions to my issues. I graduated Summa Cum Laude; however, I feel like a complete idiot.

my site is honestlee.info

I wish I could post images to allow you all to see what my page(s) should look like.

[I.m.learning]

******* Edit *****
I was wrong, Firefox and Chrome have the same animation, different than IE.

Firefox and IE display the image, Chrome does not

The image I am having issues from is from clicking the “About me” link in the footer

[Shikkediel]

I have spent over 1500 hours in the last month

Then there must have been two of you – and neither would have slept at all. Lol.

Anyway, could you elaborate on the exact element you’re trying to target? Please be as specific as possible when describing the issue, this is a bit unclear :

The image I am having issues from is from clicking the “About me” link in the footer

[Paulie_D]

So we click on “About Me” and are taken to a new page.

Ok.

There’s no styling…I guess that’s part of the issue.

The image in the HTML has

<img alt="Picture of Brian Frank" 
class="img-responsive" src="/About/DoNotTouch/img/BrianFrank.jpg"
 style="width: 160px; height: 160px;">

Does that actually represent the folder structure? Are you sure…because it doesn’t look like it.

Is the image IN the folder?

[Beverleyh]

It’s preferable to link directly to the problematic page rather than post the link to your home page and ask folks to navigate from there. It can be perceived as spammy/self-promo and get you banned in some forums.

I surmise you mean for us to click on the link to the About Me page and then assess why the image at the top of the page isn’t loading. The short of it is that it isn’t at the path/location specified in the HTML. Could be that you’ve forgotten to upload it. Could be that the folder names are incorrect (check for lettercase as well as spelling). Could be that the image extension is different (for example, jpg isn’t the same as JPG or JPEG or jpeg)

Breaking it down, the ‘DoNotTouch’ folder doesn’t exist (using that naming convention at least) so start there first. The location you’ve specified for it is http://honestlee.info/About/DoNotTouch/

[Senff]

I don’t see any images, or styling for that matter, in any browser, at http://honestlee.info/About/about-Brian.html

http://honestlee.info/About/donottouch/css/bootstrap.min.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://honestlee.info/About/DoNotTouch/img/BrianFrank.jpg
Failed to load resource: the server responded with a status of 404 (Not Found)
http://honestlee.info/About/donottouch/js/bootstrap.min.js
Failed to load resource: the server responded with a status of 404 (Not Found)
http://honestlee.info/favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)
http://honestlee.info/About/donottouch/css/bootstrap.min.css
Failed to load resource: the server responded with a status of 404 (Not Found)

If you look at the source code of the About page, it’s not even calling your styles.css file. And what is this?

<meta -=”” bio=”” brian=”” content=”Brian Frank” href=”donottouch/css/index.css” http-equiv=”X-UA-Compatible” link=”” meta=”” name=”description” portfolio=”” professional=”” rel=”stylesheet” s=”” statement=”” title=”” type=”text/css” />
“`

I suggest you clean up that page a little bit, see how you structured the HEAD tag, etc. Check and compare how you did it on the home page, because that’s where it’s working, obviously. Use that as an example. :)

[I.m.learning]

some of that code is being placed by the server. As it stands now, IE11 and Firefox show the image; however, Chrome does not.

I don’t understand why this extra code is being placed in my coding. I went to check it yesterday and it added {c} in many places. I’m thinking it’s the host that is messing me up. I thought I had to link to my home page, then have the user click the about me. I saw this response in a different post. The post stated, you cannot just go to the linked page, you have to go to the original location first.

I am new to programming and truly wish I had just attended a tech school instead of a 4-year.

And here: I know there’s no styling, that’s the issue, for some reason it’s not linking my style sheet. I have asked my host to answer some of my questions; their response was “It’s beyond our scope.” Even editing the style sheets and JavaScript fail to load the page.

I’m going to delete the whole thing and start again. Maybe I can stop the server from adding the extra codes. Anyone have any idea why their server would do that? I did notice their server’s code is using HTML 3 and I am coding HTML5

I can post later if I can find how I located that. I assumed building a website should be just as easy as creating the pages in File Explorer and then uploading to the server. That is obviously unsound and invalid arguments.

[I.m.learning]

I found this CSS code somewhere:

/* Large desktop */
@media (min-width: 1200px) { … }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { … }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { … }

/* Landscape phones and down */
@media (max-width: 480px) { … }

Do I need this in my sheet? Or is this the cause of my issue?

[Paulie_D]

Those are media queries…and no, they have nothing to do with the issue at hand.

[I.m.learning]

Shikkediel — “Then there must have been two of you – and neither would have slept at all. Lol.”
You are correct, I had 3 weeks to create a working prototype. On the 2nd week, Wednesday I stayed up all night, Thursday at 5am I went to bed; then my mind came up with something and stayed up until Friday morning at 7am; went to bed and another thought occurred. I had to force my brain to shut off; I then slept for 4 hours and went back to it.

I read somewhere about JPG and jpg were different; that was one of the issues. I had referenced all image as “jpg;” however, only 1 was jpg. I changed that. There is an issue with my host; it takes several times to edit my css or js codes.

I used an absolute path to have the pages display the images; I’m not going to worry if a relative path works because it works now. Now, after uploading the old html file, the image disappeared. I may have an issue because the last time one browser did not display my image.

I know some coding are not case-sensitive; I did not know about the file extensions being case-sensitive. The simple things like this are what colleges should be teaching and not “Here’s the code, now style it.”

I think we can close this out because if there is an issue with IE and Firefox displaying my picture, and Chrome not, it would be my host’s server and not my code…unless you think there would be.

I appreciate all of your responses; I have gotten further with this site than I ever would any place else. I just hope I’m not making you all as frustrated as I have been; this has become a valuable source for me, and would hate to lose the feedback.

[bearhead]

I won’t pretend like I know anything about running a server, but I’m not sure why or how a web host would add lines to an html document?

I noticed you changed the src of the image (it is still a relative path btw) and it is rendering now. I think you just need to be more careful when linking assets…

[I.m.learning]

I talked with name.com and they are unsure; but no matter how many times I paste the code, it adds their own stuff to it; it even removed my title completely and the default honestlee.info appeared.

I really cannot explain in words how to find this error, I edit the HTML, that opens to a Dreamweaver-like setup; when choosing “source” it opens the code. Now I went to remove it and it all messed up. I got this one though, I only have a few references to images and such. I just wish it would display my changes immediately and not have to wait up to an hour.

This doesn’t seem to affect the page at all. I placed the images in the same location and tested it from there. Instead of messing around with the relative path, I just used the absolute path.

What threw me off is name.com was performing maintenance and that’s why it took so long to update the pages. Good thing we do not have rules for using relative vs. absolute paths. However, I did read somewhere that some programs require absolute in certain locations and sometimes one must use .jpg and not .png.

I would never have solved my issue through other sites (as someone stated, “make sure the extension is the same, you cannot link *.jpg using *.JPG. The other issue was not using absolute paths.

The page looks correct; but I need to change some of my “skills” to: oblivious, confused, and ignorant. Regardless, this is how I learn, I would not had these issues if I allowed a program to do it for me.

Then again, if we keep allowing our vehicles to park themselves, or allow back-up assist, we are going to lose the skill to drive; guess Judge Dredd and Total Recall (the original) were just accurate predictions.

Suppose if I crash into Google’s self-driving car, I can just take off, not like the car’s going to call me out on a hit-and-run!
:)
I appreciate the effort you all took in my issues. Yes I am new and inexperienced; but we all started out that way.

[Shikkediel]

Just a few questions…

I use File Explorer (FE) to set up my pages

What does this mean exactly, is that a plugin or CMS? When I google, I only find the obvious references to basic file browsing.

How do you upload the content – through FTP?

And related, how is your hosting account generally set up? Mostly when it comes to “freedom” of accessing the server itself.

[bearhead]

“I edit the HTML, that opens to a Dreamweaver-like setup; when choosing “source” it opens the code. ”

It sort of sounds like you might be using name.com’s website builder to edit your documents? If so, that could explain why you’re seeing extraneous code in your HTML.

If you aren’t already, I would recommend working on your website in a local environment, and using a simple text editor like Brackets to write your code. Then upload your files when they’re finished.

[I.m.learning]

Shikkediel:
File Explorer Microsoft Document folders; where all files are in Windows OS. I set up my pages in a folder just as any server. I use Wamp, therefore, I place my folders under www.

I use Notepad++ to write my codes and then save them as their respective file, and place in respective folders. From there, I can path correctly to know how the pages are going to link.

I don’t know anything about what you’re saying, what is CMS?

Regarding:
“How do you upload the content – through FTP?”
No, FTP is for when I want to share special files through my website.

“And related, how is your hosting account generally set up? Mostly when it comes to “freedom” of accessing the server itself. ” I access the server through CPanel, I can choose to edit the file from the edit code or edit options, that opens the codes for editing; additionally, I can delete the old file and upload through [what appears to be DropBox].

[Author]

Posts