Atomの画像表示

最近、HTMLCSSを編集するために、Atom editorを使い始め、atom-preview-htmlをダウンロードしました。しかし、プレビュー画面からHTMLファイルやCSSファイルの反映は確認できるのですが、imgファイルを読み込んだことによる画像の反映が確認できません。(下記の画像からその状況が確認できます。)

Atomでは、たくさんのパッケージを読み込めるため、おそらくプレビュー画面に画像を反映できるパッケージがあると思うのですが、websiteをくまなく探しても見つかりません。

画像を反映できるパッケージ、もしくは画像を反映する方法を知っている方がいらっしゃいましたら、教えていただけると幸いです。

よろしくお願いします。

HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
  <title>京都一の美容院 美容所joze & ARCH OF JOZE 烏丸御池</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <meta http-equiv="Content-Style-Type" content="text/css" charset="UTF-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <link rel="canonical" href="http://home.rasysa.com/joze//" />
  <meta name="google-site-verification" content="90gP3x903Ua67pxDZYw1bEZEahbU6ZMV04ttkuUdU8A" />
  <meta name="Description" content="経験豊富な若手の男女スタッフが、お客様の思い通りのヘアスタイルを実現します" />
  <meta name="Keywords" content="美容院,カラー,ヘッドスパ,烏丸御池" />
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-42814292-1', 'home.rasysa.com');
  ga('send', 'pageview');
  </script>
</head>
<body>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="wrapper">
  <div id="header">
    <div class="header-bloc clearfix">
      <div class="header_L">
        <h2>経験豊かなスタッフがリラックスした空間をお届けします</h2>
        <h1>  <a href="index.html"><img src="img/logo.png" alt="jozeのロゴ"></a></h1>
      </div>  
      <div class="header_center">
        <img src="img/campaign.png" alt="ホームページ限定キャンペーン">
      </div>
        <div class="header_R">
          <p class ="ph">075-746-3155</p>
          <p class="ad">京都府京都市中京区室町通り御池上る
            <br>御池の町324-1御池幸登ビル2F
          </p>
          <p class = "sd">営業時間： 8：00～19：00</p>
          <p class = "bg">定休日：火曜日</p>
        </div>
    </div><!--header-bloc-end-->
  </div><!--header-end-->

    <div id="container">
      <div id="side2">
        <div class="menu_navo">
          <p class="menutitlo"></p>
          <ul>
          <li class = "facebook" ><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjoze.beauty%2F&width=50px&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="50px" height="30" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></li>
            <li class = "facebook2">もしよければいいねボタン押してみてください！</li>
          <li class ="qr"><img src="qr.png" alt="QRコード" class ="qrcode">美容所 joze＆ARCH OF JOZE 烏丸御池店のケイタイ</li>
          </ul>
          <li class = "ek"><img src="Reviews.gif" alt="口コミ" class ="Reviews" >口コミランキング<br>1位獲得！</li>
        </div><!--/menu_navi-->
      </div>

      <div id="inner-container">


        <div id="side" class="clearfix">
          <div class="menu_navi">
            <p class="menutitle"><img src="img/menu.png" alt="メニュー">
            </p>
            <ul>
              <li>
                <a href="index.html"><img src="img/top-menu.png" alt="トップ">
                </a>
              </li>
              <li>
                <a href="charge.html"><img src="img/course.png" alt="コース・料金案内">
                </a>
              </li>
              <li>
                <a href="access.html"><img src="img/access.png" alt="アクセス">
                </a>
              </li>
            </ul>
          </div><!--/menu_navi-->
          <p class="L_cy_box"></p>
          <p class="L_cy_box">
	         ■詳しくはNEWS & TOPIXをご覧ください。	<br>
           ■お客様からのお電話をお待ちしております <br>
	        tel : 075-746-3155 <br>
          </p>
     
a:link {
	color:#0962ad;
border:0;
}

a:visited {
}



.header-bloc{
 margin-left:auto;
 margin-right:auto;
height:104px;
width:904px;
}


.header_L{
width:350px;
margin:0 0 0 15px;
padding:4px 0 0 0;
float:left;
}

.header_R{
width:220px;
padding-left: 20px;
margin-right:13px;
float:right;
text-align:right;
}

.header_center{
margin-left: auto; margin-right: auto;
float: left;
padding-top: 25px;
padding-left:35px;
width: 200px;
}



#header h2{
font-size:11px;
color:#8d8d8d;
font-weight:lighter;
}


#container{
    width:1007px;
    margin:0 auto;
    background:#fff;
}


#inner-container {/*新規：main/sideをまとめて右へ*/
  float:right;
  width:888px;
}



#main{
float:left;
width:650px;
height:1453px;
margin-bottom:100px;
}

#side{
float:right;
width:200px;
margin-right:30px;
}

#side2{
float:left;
width:104px;
}



/* メニューバー */



li { list-style:none; }

.menu_navi{
width:200px;



.color_1{
color:#eb6100;
font-size:14px;
}

.color_m{
color:#a40000;
}

.color_2{
color:#eb6100;
}



.pd1{
padding-top:5px;
}


.content_box{
width:750px;
height:658px;
margin:32px 0 0 0;
color:#313131;
padding-left:30px;
}

.title_line{
height:4px;
background: url("img/tw_line.png") bottom repeat-x;
margin:3px 0 0 0;
}


h3{
font-size:24px;
line-height:30px;
/*font-weight:bold;*/
color:#2a2a2a;
}

.content-tex{
width:100%;
margin-top:14px;
font-size:21px;
line-height:31px;
font-weight:lighter;
}








#footer{
clear:both;
background-image: url("img/footer-bg.gif") ;
  background-repeat: repeat-x;
text-align:left;
height:126px;

}


#footer_topbg{
background: url("img/footer-bg-top.png")  no-repeat center;
width:1152px;

margin:0 auto;
position:relative; top:3px; left:0;
}


#footer-area{
 margin-left:auto;
 margin-right:auto;
width:904px;
margin-bottom:18px;
}



.tex-hu-ri{
width:294px;
font-size:12px;
padding-top:22px;
padding-left:18px;
text-align:center;
color:#aaaaaa;
 margin-left:auto;
 margin-right:auto;

}

.hutter-copy-tex{
clear:both;
padding-top:18px;
width:370px;
text-align:center;
font-weight:lighter;
color:#8B4513;
font-size:13px;
 margin-left:auto;
 margin-right:auto;
}


.tex-hu-ri a:link{
color:#A0522D;

	text-decoration: none;
}

.tex-hu-ri a:visited{
color:#A0522D;
text-decoration: none;
}



.tex-hu-ri a:hover{
color:#A0522D;

}



#footer li{
float:left;
}


/*下層ページ*/



.charge_tb{
width:100%;
border:2px solid #f93f9f;
background:#fff ;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}


.charge_tit{
width:100%;
height:51px;
background:#fbd1d7;

border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

}

/*
.charge_tb td{
border-bottom:1px solid #f93f9f;
padding:17px;
}
*/

.chtd-1{
border-right:1px solid #f93f9f;
border-bottom:1px solid #f93f9f;
padding:14px 16px;
}

.chtd-2{
border-bottom:1px solid #f93f9f;
padding:14px 0;
}


.f_bl{
color:#00a0e9;
font-size:28px;
}



.op-tit{
font-size:26px;
color:#a40000;
padding-bottom: 14px;
padding-top: 5px;
font-family: "A-OTF フォーク Pro", "Arial", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
text-align:left;

}



コード

Atom version 1.14.1です。

OSのバージョンは
Microsoft Windows [Version 10.0.14393]
(c) 2016 Microsoft Corporation. All rights reserved.です。

イメージ説明

manzyun

2017/02/10 06:10

手元の環境（macOS: Sierra10.12.2 Atom: 1.14.1）では画像が表示されました。もしかしたら他に入れているパッケージや、環境、もしくは根本的にHTMLのソースコードによるものがあるかもしれませんので、もし差し支えなければ、現在Atomを使っている環境やAtomのDeprecation、HTMLソースコードを掲載していただけると幸いです。

revoiot

2017/02/10 11:27

ご返信いただきありがとうございます。　さきほど、本文に詳細情報を追加させていただきました。

revoiot

2017/02/10 11:31

この問題におそらく関係することだと思うのですが、追加させていただくわかる通り、右下の欄に　!deprecationと表示されてしまいます。大変恐縮ですが、この問題に関してもご回答いただけるを幸いです。よろしくお願いします。

回答2件

すでに解決済みですが

自分のPCに画像がある場合はパスやurlを指定しないといけないようです。
htmlファイルと同じフォルダに画像が入ってる場合は画像のファイル名だけを指定してやると表示されますが、他のフォルダーに画像ファイルが入っている場合はフルurlを指定してやらないと表示されません。
file:///C:/ を先頭にして画像ファイルのフルパスを指定すると旨くいくと思います。
フルパスは該当ファイルをブラウザで開くと解りやすい。（と、こちらで教えて頂きました。）アドレス表示の窓に出ますのでこれをコピー。

投稿2017/04/25 09:29

編集2017/04/26 04:27