ランタイム変数は、AEM 6.2の視覚的なスタイル要素内で解決されません。

Question

私は視覚的に変数を作成して、divに背景イメージを提供しようとしています。

私は目立つようにプロパティを読んでいますが、これをスタイルタグに入力すると機能しません。ここ

が、これは私はそれが <p>タグ内 ${properties.title}が受け入れられていることを意味

<div style="background: url(); background-position: center top;"> 
<p>my Title</p></div> 

見たものであるページがレンダリングされたHTML

<sly data-sly-test.fileReference="${properties.title}" /> 

<div style="background: url(${fileReference}); background-position: center top;"> 
<p>${properties.title}</p> 

ですが、それは内部のスタイルでは動作しません。素子。

Answer 1

変数が正常に解決されました。 url()の値が空である理由は、あなたが右のDisplay Contextを使用していないためです。また、渡す値の文字列"my Title"は、有効なURL（印刷する必要があるもの）または有効なスタイルトークン（通常style属性でレンダリングされるもの）ではありません。

我々は任意の文字列を許可するように、ディスプレイコンテキストを強制する場合は、値は

<div style="background: url(${'cookies' @ context='unsafe'});"> 
</div> 
<!--/* prints background: url(cookies);*/--> 

scriptで

とに印刷されます

<div style="background: url(${'cookies'});"></div> 
<div style="background: url(${'cookies with chocolate chips'});"></div> 

<!--/* both print background: url();*/--> 

：以下の各式は、空url()値をレンダリングしますコンテキスト、HTL requires the display context to be stated explicitly。そうでない場合、出力はレンダリングされません。

背景画像を表示するために出力したいものは、画像のURLです。これを明示的にしてみましょう：

<div style="background: url('${'/etc/designs/myapp/img/someimage.png' @ context='uri'}');"> 
</div> 
<!--/* prints background: url('/etc/designs/myapp/img/someimage.png');*/--> 

ここで、そのトリックはあります。

今、アドバイスの言葉として、インライン・スタイリングを避けるようにしてください。表示コンテキストで同様の問題を解決し、クライアントライブラリの一部であればCSSの管理が容易になります。