programing

SVG 이미지를 추가하여 텍스트 필드를 확인하는 방법

bestcode 2022. 8. 17. 23:50
반응형

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

반응형