1

我正在使用 Espresso 并且收到此错误 - 加载资源失败:服务器响应状态为 404(未找到)。这些图像位于名为 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>

这是我的 .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}/$1/index-https.html.gz -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}/$1/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}/$1/index.html.gz -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}/$1/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}/$1/index-https.html -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}/$1/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}/$1/index.html -f
RewriteRule ^(.*) "/wp-content/cache/supercache/%{SERVER_NAME}/$1/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
4

3 回答 3

4

问题在于图像的相对路径。

src="images/IMG_1185.jpg"<- 相对于当前目录

例如,当您所在的网站地址是“ http://domain.com/contact ”时,它将在/contact/images

要解决此问题,您需要将图像路径更改为绝对路径,添加http://domain.com/到图像源,例如

src="http://domain.com/images/IMG_1185.jpg"<- 绝对路径

/在图像源的开头添加,如下所示:

src="/images/IMG_1185.jpg"<- 相对于基目录

我建议使用第一种方法,因为它更安全。

于 2013-11-03T22:05:55.937 回答
0

Mine had the same error when i tried to view my site through github pages. I solved the error by removing the / symbol in front of my path. See example below

Previously <img src="/images/woman.jpg" alt="dancing woman"/> (Showed error 404)

Previously <img src="images/woman.jpg" alt="dancing woman"/> (worked perfectly)

于 2021-06-27T13:52:47.033 回答
0

我通过将图像文件夹放在资产文件夹中来解决它,该文件夹是在您创建新的 Angular 应用程序时由默认创建的。
<img class = "img" width="100" height="19.094" src="assets/images/myimage.png" alt="myImage">

于 2020-01-27T10:22:08.747 回答