Html 加载资源失败：服务器响应状态为 404（未找到）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19758701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to load resource: the server responded with a status of 404 (Not Found)
提问by David Gray
I'm using Espresso and I'm getting this error- Failed to load resource: the server responded with a status of 404 (Not Found). The images are under project files in espresso inside a folder named images. Whenever I link this code into my website the images don't show but in the live preview in espresso they show. Here is my code.
我正在使用 Espresso，但出现此错误 - 无法加载资源：服务器响应状态为 404（未找到）。图像位于 espresso 中名为 images 的文件夹内的项目文件下。每当我将此代码链接到我的网站时，图像不会显示，但会在 espresso 的实时预览中显示。这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ListApp</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="photos">
<header data-role="header">
<h1> List App </h1>
</header>
<article data-role="content">
<ul data-role"listview" data-filter="true">
<li>
<a href="#dog">
<h1>American Pitbull</h1>
<img src="images/IMG_1870.jpg"
alt="Pitbull" />
<p>This is my sweet, loving Pitbull Kalvin. He's 3 years old and
a huge baby. He also likes to go out in style!</p>
</a>
</li>
<li>
<a href="#strobe">
<h1>My Old Apartment's Lighting</h1>
<img src="images/IMG_1185.jpg"
alt="Strobe Light" />
<p>We wanted to be able to light up the room in with different
colors and I found this on amazon and it's amazing. Friend's love
it and definately improves the mood.</p>
</a>
</li>
<ul>
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#" data-icon"home">Home</a></li>
<li><a href="#" data-icon"grid">Photos</a></li>
<li><a href="#" data-icon"info">Info</a></li>
</ul>
</nav>
</footer>
</div><!-- page -->
<div data-role="page" id="dog">
<header data-role="header">
<h1> Dog </h1>
<a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img src="images/IMG_1870.jpg" class="fullscreen" alt="Dog Picture" />
</div><!-- page -->
<div data-role="page" id="strobe">
<header data-role="header">
<h1> Strobe Light </h1>
<a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img src="images/IMG_1185.jpg" class="fullscreen" alt="Strobe Lights" />
</div><!-- page -->
</body>
</html>
Here is my .htaccess file:
这是我的 .htaccess 文件：
# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
#If you serve pages from behind a proxy you may want to change 'RewriteCond %{HTTPS} on' to something more sensible
AddDefaultCharset UTF-8
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTPS} on
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{SERVER_NAME}//index-https.html.gz -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}//index-https.html.gz" [L]
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTPS} !on
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{SERVER_NAME}//index.html.gz -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}//index.html.gz" [L]
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTPS} on
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{SERVER_NAME}//index-https.html -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}//index-https.html" [L]
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTPS} !on
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{SERVER_NAME}//index.html -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}//index.html" [L]
</IfModule>
# END WPSuperCache
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
回答by Flash Thunder
The problem is in relative paths to images.
问题在于图像的相对路径。
src="images/IMG_1185.jpg"<- relative to current directory
src="images/IMG_1185.jpg"<- 相对于当前目录
For example when address of site you are on is "http://domain.com/contact", it will be searching for images in /contact/images
例如，当您所在站点的地址是“ http://domain.com/contact”时，它将在/contact/images
To fix this, you need to change your image paths to absolute, adding http://domain.com/to image source, like
要解决此问题，您需要将图像路径更改为绝对路径，添加http://domain.com/到图像源，例如
src="http://domain.com/images/IMG_1185.jpg"<- absolute path
src="http://domain.com/images/IMG_1185.jpg"<- 绝对路径
or add /at the beginning of image sources, like this:
或/在图像源的开头添加，如下所示：
src="/images/IMG_1185.jpg"<- relative to base directory
src="/images/IMG_1185.jpg"<- 相对于基本目录
I suggest using first method as it is safer.
我建议使用第一种方法，因为它更安全。
回答by Gitesh kumar Jha
I solved it by putting the image folder inside assets folder which is created by deafult when you create a new angular app.<img class = "img" width="100" height="19.094" src="assets/images/myimage.png" alt="myImage">
我通过将图像文件夹放在资产文件夹中解决了它，该文件夹是在您创建新的 angular 应用程序时由默认创建的。<img class = "img" width="100" height="19.094" src="assets/images/myimage.png" alt="myImage">
