인프런 커뮤니티 질문&답변

Vue완벽가이드를 완강하고 프로젝트를 하나 만들고 있는 와중에 궁금증이 생겨서 질문 드립니다..

흐름은 이렇습니다. Vuex의 state에 저장되어 있는 이미지Url을 부모 컴포넌트에서 slot이 있는 자식 컴포넌트로 보내주려고 합니다.

이미지 Url이 src속성에 제대로 들어오는 것은 확인했습니다만 화면상에 이미지가 나타나지 않습니다 ㅠㅠ

여러가지 시도를 해보았지만 잘 되지 않습니당 ㅠ

첫번째 방법으로는  부모 컴포넌트에서 v-html 디렉티브를 이용해서 뿌려 주는 방법입니다. 아래 코드를 첨부하였습니다.

<!-- 부모 컴포넌트 -->

<display-items 
        v-for="product in products" 
        :key="product.name" 
      >
        <template #productInfo-photo>
          <div class="item-container__photo" v-html="product.imgElement"></div>
        </template>
 </display-items>

<!-- 
   product.imgElement =   '<img src="../assets/img/brands/img.png" />'
 -->

<!-- 자식 컴포넌트 -->

<template>
    <div>
        <slot name="productInfo-photo" />
    </div> 
</template>

두번째 방법은 프롭스를 내려주는 방식으로 이미지url을 내리는 방식으로 구현했습니다.

<!-- 부모컴포넌트  -->

<display-items 
        v-for="product in products" 
        :key="product.name" 
        :imgPath="product.photoUrl"
        />


<!-- 자식컴포넌트 -->
<template>
    <img :src="imgPath" />
</template>

<script>
export default {
    props:['imgPath'],
}
</script>

자세히 보니 이미지 url까지는 들어오지만 자식컴포넌트에서 적용한 CSS가 먹히지 않는 것 같은데 이유를 잘 모르겠습니다 ㅠ

제가 첨부한 코드에서는 class를 명시하지 않았지만, 첫번째 코드에서는 요소의 class를 imgElement에 포함시켰고, 두번째 코드에서는 자식 컴포넌트의 img태그에 작성하였습니다.

제가 어떤 부분을 놓치고 있는지와 다른 더 좋은 방법이 있는지 궁금합니다 !