管与vue网页开发本地图片引入方式

通过变量渲染图片图标与静态直接渲染

1.静态直接渲染 可直接填写文件名称地址路径

<img class="icon" src="/@/assets/images/icon/ic-daijihui@2x.png" />

2.通过变量渲染 

1. 失败方式  渲染之后的效果  多了个 @ 符号

<div class="tips-cell" v-for="itme in tipsCell" :key="itme.key">
    <img class="tips-icon" :src="itme.icon" alt="">
</div>

    const tipsCell = ref([
      {
        key: 'settled',
        name: '已结算(元)',
        num: '',
        msg: '',
        icon: '/@/assets/images/ic-ljlr.png',
      },
      {
        key: 'total_withdraw',
        name: '已提现(元)',
        num: '',
        msg: '提现记录',
        icon: '/@/assets/images/ic-ytxlr.png',
      },
    ]);

2. 正确引入图片方式 (必须先文件引入) 渲染之后的效果

<div class="tips-cell" v-for="itme in tipsCell" :key="itme.key">
    <img class="tips-icon" :src="itme.icon" alt="">
</div>

import moneyIcon from '/@/assets/images/ic-ljlr.png';
import freezeIcon from '/@/assets/images/ic-ztlr.png';

    const tipsCell = ref([
      {
        key: 'money',
        name: '余额(元)',
        num: '',
        msg: '提现',
        icon: moneyIcon,
      },
      {
        key: 'freeze',
        name: '在途利润(元)',
        num: '',
        msg: '',
        icon: freezeIcon,
      },
])