图片渲染的几种方式

//1.普通本地图片展示（绝对路径、相对路径
<image src="../img/blueback.png" mode="widthFix" />
<image src="@/static/img/house-owner.png"></image>

//2.动态展示图片
//tips: require是打包工具所需要的标识，你写成运行时通过变量定义，是无法获取到，没办法打包。
//require前缀必须是路径，不能是变量，后缀可以是变量
var imgSrc = "blueback.png";
require("../img/" + imgSrc);

var imgName = "blueback";
require(`../img/${imgName}.png`);

<image :src="require(`../../images/${item.imgName}`)" mode="aspectFill" />
<image :src="require(`../img/user${index+1}.png`)" mode="widthFix" />
<image :src="item.introduce" mode="aspectFill"></image>

<view v-for="(item,index) in user.slice(0,5)">
    <image src="@/pages/WhoUnderCover/img/sofa.png" mode="aspectFill" />
    <image :src="require(`../img/user${index+1}.png`)" mode="widthFix" />
</view>

//3.根据条件展示图片
<image v-if="item.memberType=='diamond_card'" src="@/static/img/diamoncard.png" mode="widthFix"></image>
<image v-if="item.memberType=='gold_card'" src="@/static/img/goldcard.png" mode="widthFix"></image>
<image v-if="item.memberType=='silver_card'" src="@/static/img/silvercard.png" mode="widthFix"></image>

<image v-if="!whoWin" src="../img/pronWin.png" mode="widthFix" />
<image v-if="whoWin"  src="../img/consWin.png" mode="widthFix" />

  //outImg:-1,//淘汰玩家的身份卡片
<image v-if="outImg=='1'" src="../img/pros.png" mode="aspectFill" />
<image v-if="outImg=='2'" src="../img/cons.png" mode="aspectFill" />
<image v-if="outImg=='3'" src="../img/whiteBrand.png" mode="aspectFill" />

//4.根据多个条件展示图片
<image v-if="item.deathState=='true'&&item.prosOrcons=='pros'"  src="../img/pros.png" mode="aspectFill" />
<image v-if="item.deathState=='true'&&item.prosOrcons=='blank'" src="../img/whiteBrand.png" mode="aspectFill" />
<image v-if="item.deathState=='true'&&item.prosOrcons=='cons'"  src="../img/cons.png" mode="aspectFill" />

<image v-if="item.deathState=='false'" :src="item.memberInfo.introduce" mode="aspectFill" />


//5.js动态添加图片
    $('#wrapper').remove();
    $('#footeet').before('<div id="wrapper" style="position: absolute;left: 0;right: 0;top: 52vh;z-index:-1"></div>')
    let ele = ['6', '2', '3', '4', '3']
    this.createEl(ele[0],ele[1], ele[2], ele[3], ele[4],'gif');

    createEl(dot1, dot2, dot3, dot4, dot5, type) {
         var el = $(`<div class="ticket-description">
                    <div style="display: flex;justify-content: center;align-items: center; width:100%;height:40Px">
                        <image src="/static/img/${dot1}.${type}" style="width: 40Px;height: 40Px;"></image>                
                        <image src="/static/img/${dot2}.${type}" style="width: 40Px;height: 40Px;"></image>                
                        <image src="/static/img/${dot3}.${type}" style="width: 40Px;height: 40Px;"></image>
                    </div>
                    <div style="display: flex;justify-content: center;align-items: center;">
                        <image src="/static/img/${dot4}.${type}" style="width: 40Px;height: 40Px;"></image>
                        <image src="/static/img/${dot5}.${type}" style="width: 40Px;height: 40Px;"></image>
                    </div>
                </div>
          `)
          $('#wrapper').append(el);
     },