Blockquotebild dynamisch mit SCSS hinzufügen

Question

Können Sie mir sagen, wie man Bild mit SCSS dynamisch hinzufügen?

Hinweis:

Ich habe svg Bild auf diesem Weg: assets/icon/left-quote.svg

Dies ist, was ich brauche.

Hier können Sie sehen, wo es aus dem Backend kommt (d. Tags).

Answer 1

Sie können die ::before Pseudo-Selektor wie folgt:

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>

machen mehr SCSS-like:

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"); 
    } 
}