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

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

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

解決済

2回答

16508閲覧

Atomの画像表示

revoiot

総合スコア188

0グッド

0クリップ

投稿2017/02/10 03:24

編集2017/02/10 11:28

最近、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.です。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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と表示されてしまいます。大変恐縮ですが、この問題に関してもご回答いただけるを幸いです。よろしくお願いします。
guest

回答2

0

すでに解決済みですが

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

投稿2017/04/25 09:29

編集2017/04/26 04:27
hgforteratail

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

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

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

投稿2017/02/11 05:56

manzyun

総合スコア2244

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

revoiot

2017/02/12 12:27

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

2017/02/13 01:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問