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

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

ただいまの
回答率

87.61%

AMPページで画像が表示されない

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 687

score 10

前提・実現したいこと

既存の静的 HTML を AMP 化しようとしています。
開発環境は HTTP で、Basic 認証を設定してあります。

amp-img で指定した画像や Google マップが表示されず困っています。
アドバイスを頂けないでしょうか。

該当のソースコード

<amp-img src="xxx.png" alt="" width="158" height="39" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive" i-amphtml-auto-lightbox-visited="">
</amp-img>
  • 画像ファイルのパスや拡張子に間違いはありません。
  • 具体的には高さが0になっているようです。
  • CSS で指定している背景画像は問題なく表示されます。

試したこと

  • Chrome デベロッパーツールで高さを直接入力すると表示されます。
  • CSS を無効にしてみても高さが0になるままでした。
  • AMP テストでは掲出したコードへのエラーは表示されませんでした。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

0

amp-img の行だけで無く、他の記述を確認しないと回答しにくいと思います。
amp-img のスタイルはどのように記述していますか?
また AMP で必要となる記述はすべてできていますか?

amp-img で指定した画像や Google マップの表示ということであれば、例として下記ページの記述を参考にしてはいかがでしょうか。(それ以外の点では下記ページは参考にしない方がいいかも知れませんが)

M.T.C.W. 会社概要
http://www.fishmtcw.com/Corporate-Profile_amp.html
このページでは画像であれば
<amp-img class="imgr" src="images/demo/mtcw_office.jpg" alt="" height="191" width="254" layout="responsive"></amp-img>

Googleマップであれば
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
を使って
<div class="maparea">
<amp-iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3270.4839572502638!2d138.41268!3d34.944477!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601a37cea21f4f37%3A0x511c05f5fbcca14!2z6Z2Z5bKh55yM6Z2Z5bKh5biC6ae_5rKz5Yy65LiL5bO277yR77yQ77yQ77yW!5e0!3m2!1sja!2sjp!4v1418893082260" width="400" height="300" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0"></amp-iframe>
</div>
としています。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

amp-img の1行だけでは情報不足だと思います。
見られては困る行を除いたHTMLを記載できませんでしょうか。

また、「amp-img で指定した画像や Google マップが表示されず」というのは、AMP ページの URLを指定しても画像や Google マップが表示されないのでしょうか?
あるいはGoogle 検索から辿ったキャッシュ上で画像や Google マップが表示されないのでしょうか?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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