반응형
SVG 이미지를 추가하여 텍스트 필드를 확인하는 방법
vuetify를 사용하고 있는데 텍스트 필드 시작 부분에 SVG 아이콘을 추가하고 싶습니다.v-icon에서 아이콘을 추가 또는 추가할 수 있다는 것은 알고 있지만, 마찬가지로 나만의 SVG 이미지를 사용하고 싶습니다.
"예약" 슬롯을 사용합니다.
<v-text-field label="My text field" type="text">
<template v-slot:prepend>
<img width="24" height="24" src="[PathToAssets]/whatever.svg" >
</template>
</v-text-field>
공개 경로에 대해 읽을 수 있습니다.
퍼블릭 패스를 사용할 것을 강력히 권장합니다.
svg 이미지 추가public/img/icons/test.svg
.
img 태그를 이렇게 사용하세요.<img src="/img/icons/test.svg">
svg 위치를 가리킵니다.
svg 공용 경로를 사용하지 않으려면 이 로더를 사용하여 svg를 Import할 수 있습니다.https://github.com/visualfanatic/vue-svg-loader
언급URL : https://stackoverflow.com/questions/53220159/how-to-add-svg-image-to-vuetify-text-field
반응형
'programing' 카테고리의 다른 글
vue-router를 typescript와 함께 사용하려고 할 때 "No overload matches this call"이 발생한다. (0) | 2022.08.17 |
---|---|
Vuejs 구성 요소의 클래스 이름을 가진 요소까지 아래로 스크롤합니다. (0) | 2022.08.17 |
Vue 구성 요소에서 JSON 텍스트용 HTML을 올바르게 렌더링합니다. (0) | 2022.08.17 |
Android - TextView TextStyle을 프로그래밍 방식으로 설정하시겠습니까? (0) | 2022.08.17 |
Vuex 스토어를 사용하여 웹 워커 구성 (0) | 2022.08.17 |