broken image in chrome and firefox works in safari

问题:

I have a logo that shows up in Safari but in Chrome it appears as a broken link and simply does not show up at all in Firefox.

            <a href="index.html"><img src="images/logo-01.png"/></a>

I have re-uploaded it many times and have even tried alternative paths and file names.

anyone know how i might be screwing this up?

回答1:

I ran into this same problem. For me, it turns out the image was corrupt. If i tried to open the png file up in photoshop, i would get an error saying it could not parse the file.

For whatever reason, safari could display the corrupt file, but chrome could not. This is how i fixed my issue. I noticed "preview" on my macbook could open the file fine. If you are using windows, possibly try paint or gimp or some other program besides photoshop.

1. I downloaded the corrupt file onto my macbook, opened it with preview (open with > preview)
2. In the preview app, go to file > duplicate, which makes a copy of your image
3. Save that duplicated image
4. As a test, i tried opening that new copied image in photoshop and i was able to!
5. Upload new file to website. I was able to view the image in chrome now.

Hope that helps anyone who ran into the same problem.

回答2:

It could be an issue with your file structure. Right now your links are using relative paths (e.g. href="index.html"). This is fine if the file you're referencing is in the same directory as the current page file. But if your current page is located elsewhere, like in a 'pages' directory or something, then you need to tell the links to start from the site root. That would look like href="/index.html" (note the slash). So for the image, you'd have:

<a href="/index.html"><img src="/images/logo-01.png"/></a>