質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

Atomの画像表示

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,444

revoiot

score 116

最近、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", "MS Pゴシック", 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.です。

イメージ説明
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • manzyun

    2017/02/10 15:10

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

    キャンセル

  • revoiot

    2017/02/10 20:27

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

    キャンセル

  • revoiot

    2017/02/10 20:31

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

    キャンセル

回答 2

+2

すでに解決済みですが

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

自宅環境のUbuntu 16.10, Atom1.11.2, atom-html-preview 0.1.22で調査してみたのですが、やはり画像が表示されないという不具合は再現されませんでした。

また、HTMLをプレビューするパッケージはatom-html-previewくらいしか見当たらないですね。

もし英語が少しでもかければ、今回のパッケージの不具合を、今回の質問を翻訳するような形で開発者にissueを投げることをおすすめします。もしかしたらWindows10特有のバグなのかもしれません。

お役に立てず申し訳ございません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/12 21:27

    htmlファイルが入ってフォルダーにimgファイルを格納したらできました。親切に教えていただきありがとうございました。

    キャンセル

  • 2017/02/13 10:50

    あ、良かった。画像表示できたのですね :)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    cssのfloatの箇所が分かりません。

    初めて投稿させて頂きます。 cssで、一段組みのサイト全体の中央揃えと画像、 テキストの左揃えの箇所が分かりません。 サイト全体を中央揃えにし、全体の幅960px、

  • 解決済

    HTMLのレイアウトについて

    レイアウトが崩れてしまいます。 サイドバーの横に文字を打ちたいと思うのですがサイドバーの下にレイアウトが崩れる原因を教えてほしいです。 発生している問題・エラーメッセ

  • 解決済

    htmlとcssの使い方について

    HTMLとCSSを使用して表を作成しようとしています。 表の一行目のセルに書かれている文字を白に、セル色をオレンジに変更したいです。 一つのセルごとに文字色/セル色を指定す

  • 解決済

    <div> の場所と同じように <h2>も動かしたい。

    div の場所と<h1>のタイトルは同じようにウィンドウを大きくしたり小さくしたりすると、場所を毎回変えるのですが、どうしてか、h2 のChocolate Rough だけ動きませ

  • 解決済

    jquery.inview.jsが反応しない

    質問はコード内にあります、また画像はここでは(画像)と表記しています <!DOCTYPE html> <head> <meata lang="ja"> <meta chars

  • 解決済

    navのタブメニューの要素が、ずっと表示されてしまいます。

    navのtab-changeクラスにおいて、#howtoseeを、タブがクリックした時だけ表示するようにしたいのですが、他の2つの#this-weekと#todayをクリックした時

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 解決済

    HTMLで作成している検索ボックスの入力欄の高さを広げたいです。

    前提・実現したいこと HTMLで作成している検索ボックスの入力欄の高さを広げたいですが 広げることができません。 cssで設定しているのですが上手くいかないのでご教授いただけた

同じタグがついた質問を見る