SCSSを使用して動的にブロッククォートイメージを追加

Question

SCSSを使用してイメージを動的に追加する方法を教えてください。

注：

私はこのパス上svgイメージを持っている：assets/icon/left-quote.svg

は、これは私が必要なものです。ここで

それはバックエンド（すなわち。タグ）から来て、どこで見ることができます。

Answer 1

次のようにして、::before擬似セレクタを使用することができます。

blockquote { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    color: darkblue; 
 
} 
 

 
blockquote::before { 
 
    display: block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    margin: 1em auto; 
 
    content: url("https://upload.wikimedia.org/wikipedia/commons/2/25/Quote_left_font_awesome.svg"); 
 
}

<blockquote> 
 
    Parties prenantes de cette organisation (marchande ou non-marchande) par rapport aux attentes et besoins 
 
</blockquote>

をそれよりSCSS-ようにするには：

blockquote { 
    text-align: center; 
    font-weight: bold; 
    font-style: italic; 
    color: darkblue; 

    &::before { 
    display: block; 
    width: 1.5em; 
    height: 1.5em; 
    margin: 1em auto; 
    content: url("https://upload.wikimedia.org/wikipedia/commons/2/25/Quote_left_font_awesome.svg"); 
    } 
}