김평범's OrdinaryCode

  • 홈
  • 태그
  • 방명록
게으른 프런트앤드 개발자입니다.

vuerequire 1

[Vue.js] 이미지 경로를 변수, data 값, URL로 이미지 연결하는 방법 (require이용)

vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 이용하는 방법이다. vue 이미지 변수로 연결하기 샘플 코드는 아래와 같다. 이미지를 data에 선언한 변수를 연결한 뒤, 이미지를 클릭하면 if문 분기를 이용해서 이미지가 변경되는 코드이다. 실제 화면 해당 소스를 실제로 실행해보면 imgName에 들어있는. png 파일을 연결해준다. 또한 이미지를 클릭하면 imgName Data가 변경되면서 이미지가 if문 분기에 따라 변경되게 된다. URL 이미지에 연결 마찬가지로 URL을 연결하는 것도 가능하다. 그리고 그 URL 안에도 변수 처리 또한 가능하다...

FrontEnd/Vue.js 2021.06.15
1
더보기
  • 분류 전체보기 (170)
    • Diary (4)
    • FrontEnd (83)
      • Javascript (17)
      • Vue.js (23)
      • css (17)
    • etc. (81)
      • Notion (69)

Tag

노션활용법, JavaScript, Vue, 노션, 자바스크립트, react, notion, NUXT, 노션수식, 노션템플릿, Notion템플릿공유, CSS, 노션가이드, 노션데이터베이스, 노션표, 노션무료템플릿, 노션가계부, 노션유용한템플릿, 노션사용법, 노션템플릿공유,

최근글과 인기글

  • 최근글
  • 인기글
  • [vue] v-if 내 조건으로 filter로 데이터 변환 후 비교하기 2022.08.05 19:05
  • [css] css :has 사용 방법 및 지원 브라우저 (특정 요소 갖는 부모 요소⋯ 2022.08.02 23:37
  • [Notion] 노션 데이터베이스 사이드 보기 기능 추가 (업데이트 알림) 2022.07.26 21:45
  • 2022년 프론트엔드 개발 로드맵으로 보는 개발 트랜드와 공부 우선순위⋯ 2022.01.09 21:39
  • [Notion] 노션에서 github 연동해서 git 히스토리 미리보기(링크 미리보기) 2022.02.24 22:13
  • [노션/notion] 노션 기본 표 추가하는 방법 (간단한 표 활용) 2021.11.23 18:47

최근댓글

  • 템플릿 공유 감사합니다.

    빵떡

  • 템플릿 공유 감사합니다!

    초코맛젤리

  • 감사합니다!

    qone

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

  • 2022/08
  • 2022/07
  • 2022/06
  • 2022/05
  • 2022/04

Calendar

«   2022/08   »
일 월 화 수 목 금 토
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Copyright © Kakao Corp. All rights reserved.

티스토리툴바