• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Vue 게시판 강의 도중 img 경로 삽입 문제가 있어서 질문드립니다.

강의 도중 img 경로 삽입 문제가 있어서 질문드립니다.

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #45866

    이성수
    참가자
    아직 강의 초반부를 듣고 있습니다. 
    
    assets/img/ 폴더에 jpg 파일들을 넣어 놓은 상태이고 
    각 파일명은 room0.jpg, room1.jpg, room2.jpg 입니다 
    
    이 이미지들을 들고오기 위해 v-for문을 사용하여 
    <template>
    <div v-for="(item, idx) in products" :key="item">
     
    </div>
    </template>
    <script>
    export default {
      name: 'App',
      data() { // 데이터 보관함
        return {
          products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
        }
      },
    }
    </script>
    
    라는 식으로 코드를 짜 보았는데 이미지 파일을 잡아오지 못합니다. 
    
    검색 끝에 v-bind 함수를 이용하여 
    
    <template>
    <div v-for="(item, idx) in products" :key="item">
      
    </div>
    </template>
    
    
    <script>
    export default {
      name: 'App',
      data() { // 데이터 보관함
        return {
          getSrc : function (index) {
            return require('./assets/img/room' + index + '.jpg');
          },
          products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
        }
      },
    }
    </script>
    
    이렇게 require 함수를 사용하면 되고, 
    안되는 이유가 require 함수를 사용하지 않으면 단순 문자열(string)로만 인식해서 안된다고 하는데
    
    도무지 이게 무슨 말인지 이해를 못하겠습니다. 
    
    src 경로를 받아오는 것도 결국은 문자열로 경로를 찾는다는 말 아닌가요? 
    
    경로 파싱과정에서 string은 인식을 못한다는 말인가요?
    #45869

    이성수
    참가자
    템플릿 부분에 경로 적어넣은 부분이 계속 짤리네요
    댓글로 넣어도 짤려서 사진으로 첨부합니다. 
    
    
    
    2번이 안되는 방법이고 1번이 되는 방법입니다. 
    
    getSrc : function (index) {
      return require('./assets/img/room' + index + '.jpg');
    },
    
    #45889

    codingapple
    키 마스터
    이미지경로 동적으로 넣을 땐 꼭 require() 써야합니다 webpack이 정한 문법입니다
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠