I am attempting to render a list of components. All the data properties are displaying correctly except the img src url.
the files/folders are :
CryptContent.vue - contains the v-for
- the component to render assets/ - contains the images
The CryptContent.vue contain:
<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>` OwnedCardContent.vue contains:
<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> The image won't render. When I inspect the code, the correct value from allCards graphic gets injected into the page..
when I remove :src and put just src="./assets/jim.svg" it works.
so I assume it's how webpack prepares it maybe ? I dont know enough about it :(
any help would be super helpful, thanks !
