자 컴포넌트 내의 이미지의 :src를 바인드하려면 어떻게 해야 합니까?

자 컴포넌트 내의 이미지의 :src를 바인드하려면 어떻게 해야 합니까?

구성 요소 목록을 렌더링하려고 합니다.img src URL을 제외한 모든 데이터 속성이 올바르게 표시됩니다.

파일/파일은 다음과 같습니다.

Crypt Content(암호 콘텐츠)vue - v-for를 포함합니다.

• 렌더링하는 컴포넌트 / - 이미지 포함

Crypt Content.vue 내용:

<template>
<OwnedCardContent
            v-for="card in allCards"
            :id="card.id"
            :name="card.name"
            :cost="card.cost"
            :cset="card.cset"
            :edition_total="card.edition_total"
            :level="card.card_level"
            :unlock_czxp="card.unlock_czxp"
            :buy_czxp="card.buy_czxp"
            :transfer_czxp="card.transfer_czxp"
            :sacrifice_czxp="card.sacrifice_czxp"
            :url="card.graphic"
            :card_class="card.bg"
></OwnedCardContent>
</template>

<script>
allcards : [
      {id:0, name: 'Jim Zombie',graphic: './assets/jim.svg', cost: 300, cset: 'We like to party set', edition_total: ' of 100',unlock_czxp : '1,300,300',card_level: 80, buy_czxp: '1,800',transfer_czxp: '100', sacrifice_czxp: '2,300',bg: 'card-bg card-bg-6'},
]
 </script>`

Owned Card Content(소유 카드 내용).vue 내용:

<template>
<div id="1" :class="card_class">
            <img class="card-img" :src="url" />
            <span class="card-edition">#1{{edition_total}}</span>
            <div class="card-item-name text-center">{{name}}<br>{{cset}}</div>
            <div class="card-czxp text-left">{{unlock_czxp}}</div>
            <div class="card-level">{{level}}</div>
          </div>
        </div>
</template>

<script>
export default {
name: 'OwnedCardContent',
props: ['id','name','url','edition_total','cset','unlock_czxp','level','cost','buy_czxp','transfer_czxp','sacrifice_czxp','card_class'],
data () {
return {

    }
  }
}
</script>

이미지가 렌더링되지 않습니다.코드를 검사하면 allCards 그래픽의 올바른 값이 페이지에 삽입됩니다.

:src를 삭제하고 src="/jim/jim.g"만 넣으면 동작합니다.

웹 팩이 어떻게 준비하는지 알겠네요?나는 그것에 대해 충분히 알지 못한다:)

어떤 도움도 큰 도움이 될 것입니다, 감사합니다!

webpack 이미지는 모듈로 간주되므로 다음과 같이 Import 또는 요구해야 합니다.

 allcards : [ {id:0, name: 'Jim Zombie',graphic: require('./assets/jim.svg'), ....]

또는

  import img from './assets/jim.svg';
  export default{
       ...
         data(){
             return {
               allcards : [ {id:0, name: 'Jim Zombie',graphic: img, ....],
                 ...
                }
             }
         ...

        }

src의 메서드를 사용해 볼 수 있습니까?

getImgUrl(path) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + path + ".png")
  }

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

이거 드셔보세요

<img v-attr="src:imgUrl">

언급URL : https://stackoverflow.com/questions/53950105/how-do-i-bind-a-src-for-an-image-in-the-child-component