We help IT Professionals succeed at work.
Troubleshooting Question

image wont load

David Schure
David Schure asked
on
83 Views
Last Modified: 2020-10-19
This image will not load...When the page loads, I see the image briefly then I get this...


<a class="navbar-brand" href="#">
            <!--h2 style="padding-top:20%">Arise</h2-->
            <img src="../../resources/images/Logos/Navbar45.png">
         </a>
Comment
Watch Question

Author

Commented:
Added size to it, still no image...
<img src="../../resources/images/Logos/Navbar45.png" width="106px" height="45px">

ste5anSenior Developer
CERTIFIED EXPERT

Commented:
And what should it look like? Any JS going havoc? CSS problems maybe?

Just a comment: Directory traversals are bad in most cases.

Edith says: your naming convention looks like that you maybe need src="/resources/images/Logos/Navbar45.png" instead.
CERTIFIED EXPERT

Commented:
Hi,
check the path and check if image exist.
Also if you site is hosted on linux it is case sensitive.

../../resources/images/Logos/Navbar45.png

Author

Commented:
Its weird the path the path should be resources/images/Logos/Navbar45.png but that says image not found......
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hey David,

By using the double dots, you're effectively navigating up the folder structure - starting at the folder your page is in. Depending on where that is, it may be beyond the webserver's allowed files - so if this code is on a file in the root, then you're trying to retrieve a image from 2 directories up, which isn't allowed.

It's almost certainly a path problem leading to a 404 on the image.

Author

Commented:
The CSS for the navbar
.navbar .navbar-header a {
  line-height: 65px;
  height: 65px;
}
.navbar .navbar-header .navbar-brand {
  padding: 0 15px;
}
.navbar .navbar-header .navbar-brand img {
  display: inline-block;
  margin-top: -6px;
}
.navbar .navbar-header .menu-toggler {
  margin-right: 60px;
  padding: 0 15px;
  font-size: 17px;
  color: #c8c7cc;
}
.navbar .navbar-header .sidebar-toggler {
  font-size: 17px;
  padding-right: 15px;
  color: #c8c7cc;
}
.navbar .navbar-header .sidebar-toggler:hover {
  color: #aeacb4;
}
.navbar .navbar-header .sidebar-mobile-toggler {
  font-size: 17px;
  padding-left: 15px;
  padding-right: 15px;
  color: #c8c7cc;
}
.navbar .navbar-header .sidebar-mobile-toggler:hover {
  color: #aeacb4;
}
.navbar .navbar-header .sidebar-mobile-toggler > i {
  position: relative;
  z-index: -1;
}
.navbar .navbar-collapse {
  border-bottom: 1px solid #c8c7cc;
  border-top: none;
  background: #ffffff;
  padding-left: 15px !important;
  padding-right: 15px !important;
  position: relative;
}
ste5anSenior Developer
CERTIFIED EXPERT

Commented:
Well, what's the full URL of the image? What is the full URL of your page?

The difference is the scr value,
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Is that the publicly available path (i.e. is resources a subfolder of your main document root (the one where the main index page lives).
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Nothing in the CSS is relevant to this question - it's a problem with your path (the bit you've set the src to)
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
if you have a link, can you share...
if not, open it with chrome and press F12
what is the actual url of the image on server, check it with dev tool just opened...
check console and resources to see everything looks ok...

Author

Commented:
So I moved the image into the CLIENT folder    
CLIENT/assets/images/Navbar45.png  same thing...
Here is the page.  Not sure you can see it though..
https://arise.plus/CLIENT/calendar.php#
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
try

<img src="../../../../resources/images/Logos/Navbar45.png" width="106px" height="45px" alt="1">
<img src="../../../resources/images/Logos/Navbar45.png" width="106px" height="45px" alt="2">
<img src="../../resources/images/Logos/Navbar45.png" width="106px" height="45px" alt="3">
<img src="../resources/images/Logos/Navbar45.png" width="106px" height="45px" alt="4">
<img src="/resources/images/Logos/Navbar45.png" width="106px" height="45px" alt="5">
<img src="resources/images/Logos/Navbar45.png" width="106px" height="45px" alt="6">

and see which one is showing up :)
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I see these are missing

https://arise.plus/resources/css/bootstrap.css.map
https://arise.plus/resources/js/popper.min.js.map
https://arise.plus/resources/js/bootstrap.js.map
https://arise.plus/resources/js/jquery.flexslider.min.js.map

Author

Commented:

Author

Commented:
None of them showed up...

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
and I see this file exists
https://arise.plus/resources/images/Logos/Navbar45.png
but I cannot see where it is not loaded or the issue you mentioned...
ste5anSenior Developer
CERTIFIED EXPERT

Commented:
CLIENT/assets/images/Navbar45.png  same thing...
Here is the page.  Not sure you can see it though..
https://arise.plus/CLIENT/calendar.php#
In this case it is

src="assets/images/Navbar45.png"

Open in new window

or

src="/assets/images/Navbar45.png"

Open in new window


and for

https://arise.plus/resources/images/Logos/Navbar45.png

it is

src="/resources/images/Logos/Navbar45.png"

Open in new window

See here.
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
which page are you talking about?
I cannot see anything wrong...
do we have to login?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hey David,

The resources folder is off the root, so set an absolute URL with a leading slash and you'll be good to go:

<img src="/resources/images/Logos/Navbar45.png">

Open in new window

Author

Commented:
THis is not the name of the file.....

Author

Commented:
<img src="/resources/images/Logos/Navbar45.png" width="106px" height="45px">
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Yeah - if you set the src to the following, it works:

<img src="/resources/images/Logos/Navbar45.png">
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Bit confused now - you keep talking about an images called Navbar45.png and you can't find it, but your html is referring to a file called logo2.png !!

Author

Commented:
Yeah.  I do not know where that is coming from!  Let me rename the file to logo2.png and see what happens

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
As Chris said

this will work ASSUMING we are still talking about the code in your original question

<a class="navbar-brand" href="#">
  <!--h2 style="padding-top:20%">Arise</h2-->
  <img src="/resources/images/Logos/Navbar45.png">
</a>

Open in new window


https://jsfiddle.net/mplungjan/o4y1rtqa/

Make sure you reload the page
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
after login\ I see the issue

HTML
<img src="assets/images/logo2.png" width="106px" height="45px">

do you have images folder?

Author

Commented:
Holy cow!  That worked! ???????????? I do not understand where that logo2 is coming frpm?

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
now it works


Author

Commented:
YUP.

Author

Commented:
Yes it works after I renamed the file... But.  What is controlling this to make the name logo2.png  that is the question!

David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Provide your actual working URL for testing.

Better to test + know, than guess.

Author

Commented:
Thank you everyone for your help.  It's working but why?  I don't know.  It's odd that I had to rename the file to logo2.png
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
https://webpagetest.org/result/201014_Di1M_792da5aec50c08378d1dde19348bc175/1/details/#waterfall_view_step1 provides a quick scan of assets/files served to render this page.

There is no logo2.png image in HTML produced.

So no 404 for this asset/file.

Same for Navbar45.png - no reference to this asset/file in rendered HTML.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Hi David, I do not understand why you would need to rename anything
The code in my comment based on Chris' comment takes the image you had in your INITIAL question and fixes the path. The image exists and is NOT in assets

Author

Commented:
Hi MIchael, the image was not showing as Navbar45 only as logo2  So somewhere, somehow it's called logo2

Author

Commented:
Wow! David I love this report!  This can be really helpful!!!
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hmmm - if you'd set your path correct in your HTML it would have shown perfectly fine. You can view your image here:

https://arise.plus/resources/images/Logos/Navbar45.png

Author

Commented:
This is what it was set at...and logo2.png kept coming up...
<img src="/resources/images/Logos/Navbar45.png">
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
In that case, you're likely editing the wrong html / template file :(

Author

Commented:
I will delve further into it.  Thank you Chris.  The mysteries of the internet! LOL!
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Yes.

I use https://WebPageTest.org as my first check, when looking at a new project or doing problem resolution.

For example, at first glance, this test (along with 60 seconds of other tests) suggests in <5 minutes...

1) You're running HTTP2 (good).

2) Generating + serving your HTML component < 500 ms (good).

3) All other assets seem to be throttling (very bad), so this suggests it's time for you to change hosting, if this is a money project, rather than hobby or proof of concept project.

4) Based on #3, next check is your hosting... so your site is hosted on a machine with many other sites, so your site speed... will never be consistent, rather your site speed/stability/security is determined by the lunacy of all other sites running along side your site on the same machine.

5) Based on #3 + #4, checking your hosting company, you're using GoDaddy... sigh...

[ ... soapbox mode on ... ]

GoDaddy is the single most worst hosting on the planet. At least that I've seen to date. Even worse than EIG owned companies.

Slow. Flakey. Likely you're hacked + don't know it. Customer support abysmal. They couldn't answer their way out of a wet paper sack... er... said differently, they're pretty much incompetent... at least I've never conversed with a competent GoDaddy support person...

Best to lease a dedicated server from OVH/SoYouStart/KimSufi, where...

Prices range from $5/month to $1000s/month, based resources you require...

If this is a money project.

If not, GoDaddy's fine. Also running a server out of you front room is fine too, which will be more reliable + secure than GoDaddy.

Hosting you use relates to income generated by a site.

[ ... soap box mode off ... ]

Author

Commented:
David thank you for your suggestion.  Go Daddy has been getting worse and worse!  I will start looking for another server.

Author

Commented:
Found the problem.  Javascript file...
function switchLogo(theme) {
         switch (theme) {
            case "theme-2":
            case "theme-3":
            case "theme-5":
            case "theme-6":
               $(".navbar-brand img").attr("src", "assets/images/logo2.png");
               break;

            default:
               $(".navbar-brand img").attr("src", "assets/images/logo.png");
               break;
         }
      }
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I have all my sites on godaddy. Only beef I have is that one of them gets hacked and I will have to pay for the fix. They somehow manage to rewrite my htaccess once a month and I cannot stop them

Author

Commented:
Is it Go Daddy that is hacking?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
No. External Russian viagra ads

Author

Commented:
OH OH.  My other site has that when trying to access from google.  I better get busy!
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
When you come to the point of choosing hosting, read through EE comments related to - GoDaddy + EIG + AWS surprise billing - as many recent posts have covered these topics.

Where possible lease your own bare metal machines, then lock them down tight... use LXD to partition each Site/App/API into it's own runtime environment...

The net result of this is stellar speed, stability, security.

And, you will have to do your own admin. This can be a hurdle in the beginning + over time, provides a massively high return on time investment across all your projects.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@David - I really do not have time or feel comfortable to "root around" my sites and upload new version of php and install node and stuff on bare metal. I really have had no issues with GD other than their reluctance to close some wordpress hole without me paying $120 a year for hackerproofing my sites.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@David: Look in the .htaccess, make a minimum viable version and replace the hacked one. Then empty the files the .htaccess pointed at and write protect them and make them unreadable from public.
Take a copy of the now clean -htaccess and every so often compare that to the real one. When it changes rince and repeat.
ste5anSenior Developer
CERTIFIED EXPERT

Commented:
When .htaccess got hacked, then there are issues in the hosting. Cause it should not be writeable by the WordPress OS accounts.
So check whether you can set permissions accordingly, when you cannot change it, then contact their support (should be free for WordPress hosting).
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@ste5an: I am not actually using wordpress, but GUESS there are holes in other wordpress folders where you can save
../../../otheruser/.htaccess
ste5anSenior Developer
CERTIFIED EXPERT

Commented:
This is probably a two-fold issue:

1) Each virtual host (WP instance, otheruser) should have its own document root. Then a traversal is blocked, e.g. by Apache.
2) The WordPress OS accounts MUST not have write access to any .htaccess file.

Depending on the hoster and hosting packed (1) is correctly setup  and (2) can be normally set by you e.g. in with an (S)FTP program..
ste5anSenior Developer
CERTIFIED EXPERT

Commented:
Ach so..

Author

Commented:
This is interesting we've gone from an image not showing, to hosting, and now Russian Hackers!  Love it!  BTW image is now showing.... MIchael thank you for the update on the htaccess...my other site is no longer selling Viagra!
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You are welcome
(Assuming you meant me, Michel)