SCSS를 사용하여 동적으로 블록 쿼트 이미지 추가

Question

SCSS을 사용하여 이미지를 동적으로 추가하는 방법을 알려주시겠습니까?

참고 : assets/icon/left-quote.svg

이 내가해야 할 것입니다 :

나는이 경로에 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"); 
    } 
}