我正在尝试呈现组件列表。除img src url外,所有数据属性均正确显示。
文件/文件夹为:
CryptContent.vue-包含v-for
CryptContent.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>`
OwnedCardContent.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 =“ ./ assets / jim.svg”时,它会起作用。
所以我认为这可能是webpack如何准备的?我对此了解不多:(
任何帮助都将非常有帮助,谢谢!
答案 0 :(得分:4)
在使用webpack时,图像被视为模块,因此您应该导入或要求它们像:
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, ....],
...
}
}
...
}
答案 1 :(得分:1)
您可以尝试对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>
答案 2 :(得分:0)
您可以尝试
<img v-attr="src:imgUrl">