css：画像読み込み失敗

Question

前提・実現したいこと

cssで背景画像を指定したいのですが(大文字タイトルの背景にしたい)、
読み込みに失敗したというエラーがでました。

発生している問題・エラーメッセージ

Chromeの検証のNetworkを確認したらこうなっていました。

ERR_FILE_NOT_FOUND

該当のソースコード

#main_img_inner{
  width:100%;
  height:auto;
  background:url(../images/cafe_main.jpg) no-repeat;
}

<div id="main_img">
      <div id="main_img_inner"></div>
      <h1>時のはざまでほっとひといき</h1>
    </div>

試したこと

階層なども確認しましたが、関係がなさそうに思いました。
読み込みの失敗が起こるのはどういう場合なのでしょうか…

補足情報（FW/ツールのバージョンなど）

追記

ファイルの階層はこうなっています。
Atomの画面のスクショです。

Comments

[x_x]

エラーメッセージからもわかるようにファイルがそこにないのです。ファイルの存在は確認したのでしょうか？

[greeash]

htmlファイル/cssファイル/画像ファイルなどのそれぞれの階層を明記してほしいです。

Answer 1

階層が違うし、フォルダ名も違いますね

url("./imges/cafe_main.jpg")

Comments

[dazingcat]

フォルダ名のミスを修正しても直らなかったのですが
・ダブルクォーテーションで囲んでいなかったこと
・「/」の前の「.」の数が違ったこと
以上2点を改善したらエラーが出なくなりました。
ありがとうございました。

Answer 2

同様のエラーに関するフォーラムによると、考えうる原因は以下のようなものです。

• ディレクトリおよびファイル名にスペースが含まれている
• chromeのバージョン依存のバグ

そのため、試すべき打ち手としては

1. 他のブラウザで動作するか確認する
2. chromeのバージョンを確認する
3. ファイル名を今一度確認する

ではないでしょうか。