Q&A
現在、Atomを使って開発を進めており
プレビューのためにatom-html-previewというプラグインをインストールしたのですが
CSSや画像などが反映されません。
どなたか解決策をご存じの方、ご教示いただけると幸いでござまいます。
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答2件
2
こんにちは!
CSSや画像が反映されていないということはプラグインの影響ではなく読み込みパスが間違っている可能性があります。
プレビュー機能ではなく、ブラウザで直接確認してみて読み込めていなかった場合、読み込めていない可能性が高いです!
imgタグやcssのパスはどのように記述されているでしょうか?
投稿2017/08/28 06:56
総合スコア274
1
ベストアンサー
確認していないのでこれで良いのかわかりませんが、このサイトの通りにやってみてはいかがでしょうか(違っていたらすみません)。
Atom Html PrevierでローカルにあるCSSを読み込む方法 - 役立ちぬ開発史、それはただのブログ
方法
ctrl+shift+P
で表示されるテキストエリアに、settings View: View Installed Packages
と入力&クリック- 右側のインストール済みのパッケージの一覧から
Atom Html Preview
をクリック - 上側の
View Code
をクリック lib
の中のatom-html-preview-view.coffee
ファイルを開く
iframe.src = "data:text/html;charset=utf-8,#{encodeURI(text)}"
を、以下のように置換
iframe.setAttribute("sandbox", "allow-scripts allow-same-origin") iframe.src = @getPath()
6.Atomを再起動
投稿2017/08/28 07:07
総合スコア476
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
関連した質問
Q&A
解決済
ボタンのcssが一部にしか効かない
回答2
クリップ0
更新
2023/05/06
意見交換
受付中
h1タグを非表示や透明化させるのは良くないでしょうか?
回答3
クリップ2
更新
2023/06/01
Q&A
解決済
ハンバーガーメニューの挙動について(transitionが、もとに戻る時には適応されない)
回答2
クリップ0
更新
2023/06/02
Q&A
解決済
ボタンをクリックした時に、画面いっぱいにグレーのdivを透かして表示させた時、それ以降ボタンが押せなくなる。
回答1
クリップ1
更新
2023/06/04
Q&A
解決済
【PC】横スクロール可能なボックスを複数並べ、その全てのボックス内においてマウスホイールでの横スクロール操作をしたい
回答2
クリップ0
更新
2023/06/01
Q&A
解決済
htmlの検索フォームにcssを適用させたいです。
回答1
クリップ0
更新
2023/06/02
意見交換
受付中
いくつかのメソッドの大項目としてのコメントアウトをどう書くか
回答3
クリップ1
更新
2023/06/04
同じタグがついた質問を見る
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。