0

現在、あるサイトで Zurb Foundation を使用しており、背景画像の代わりにデータ交換を使用することを検討しています。

画像拡張子 (JPG、PNG) を持つ画像を処理しますが、CMS の動的に作成された画像を使用しようとすると、常に停止します。

例：

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>data-interchange test</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row"><div class="large-12 columns">
    <div data-interchange="[http://bus.wisc.edu/_images/template/global/thin/logo-horizontal.png, (default)]" style="width:100%;height:400px;">
        JPG extension
    </div>
</div></div>

<div class="row"><div class="large-12 columns">
    <div data-interchange="[https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=640&h=150, (default)]" style="width:100%;height:400px;">
        Dynamic image
    </div>
</div></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.interchange.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Interchange に関するドキュメントに基づいて、彼らはそれをコンテンツとして扱い、そのようにロードしようとしているようです:

画像パス (.jpg、.jpeg、.png、.gif、.bmp、.tiff) を含むデータ交換属性を追加すると、要素のコンテンツを置き換える代わりに、背景画像 css プロパティが対応するパスに設定されます。 .

持っていないのは、それを画像として扱うように Foundation に指示する方法です。これは私が望んでいることです。

URL を特定のタイプ (画像とコンテンツ) として扱うよう Foundation に指示する方法はありますか?

4

0 に答える 0