当前位置: 主页 > 日志 > 个人日记 > 文章

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

发布时间: 2022-09-06 09:27:54 作者: 王乐园 浏览次数: 34

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

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,
      },
])

本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: