VUE 动态引入本地图片以及一行两列的布局

最新推荐文章于 2024-07-28 22:02:05 发布

liuye066

最新推荐文章于 2024-07-28 22:02:05 发布

阅读量1.5k

点赞数 1

分类专栏：混合开发文章标签： vue js

本文链接：https://blog.csdn.net/liuye066/article/details/114301193

版权

混合开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1。代码中使用：

<!--一行两列的布局-->
<table style="width: 100%; margin-left: 1px; padding-right: 12px;margin-bottom: 20px" border="0">
            <tr v-for="(goodItem,index) in goods" :key="index">
                <td v-for="(goodSub,index1) in goodItem" :key="index1" style="width: 50%">
                    <div style="background-color: white; border-radius: 10px; padding: 7px;margin-top: 12px;margin-left: 11px">
                        <table border="0"  @click="changeScore(goodSub)" style="width: 100%">
                            <tr>
                                <td>
                                    <div style="position: relative;">
                                        <!--<img v-bind:src="goodSub.imgUrl" :onerror="errorImg" width="100%" style="float: left;  border-radius: 4px">-->
                                        <!--   动态引用本地图片 -->
                                        <img :src="require('@/assets/'+goodSub.imgUrl)" :onerror="errorImg" width="100%" style="float: left;  border-radius: 4px">
                                        <div class="scoreChange">
                                            <span class="scoreText">能量{{goodSub.score}}抵{{goodSub.score/100}}</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" style="height: 46px">
                                    <span class="goodNameStyle">{{ goodSub.name }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <span style="font-family: PingFangSC-Regular;font-size: 10px;color: #BBBBBB; margin-top: 8px; "><del>{{ goodSub.markPrice }}</del></span>
                                </td>
                            </tr>
                            <tr>
                                <td align="left">
                        <span style="font-family: DINAlternate-Bold;font-size: 12px;
color: #4AB454; letter-spacing: 0.14px; margin-top: 4px">{{ goodSub.salePrice }}</span>
                                    <span style="font-family: PingFangSC-Regular;font-size: 11px;
color: #4AB454;letter-spacing: 0.13px; margin-left: 18px;">抵扣价</span>
                                </td>
                            </tr>
                        </table>
                        <!--            </a>-->
                    </div>
                </td>
            </tr>
        </table>

动态引用本地图片时的情况：

<!--直接使用v-bind:src="goodSub.imgUrl"不起作用，报错-->
<img v-bind:src="goodSub.imgUrl" :onerror="errorImg" width="100%" style="float: left;  border-radius: 4px">

<!--直接使用路径src="./../assets/product_bath.png"，可正常显示-->
<img src="./../assets/product_bath.png" :onerror="errorImg" width="100%" style="float: left;  border-radius: 4px">

// 直接应用不会报错
require("@/assets/product_bath.png") 

// 使用变量报错，路径未找到
require(path) 

<!--使用变量拼接, 不能完全使用变量，前置地址必须是静态地址，否则会报错-->
<img :src="require('@/assets/'+goodSub.imgUrl)" :onerror="errorImg" width="100%" style="float: left;  border-radius: 4px">

js代码：

<script>
    import product from '../assets/icon_product.png'
    export default {
        name: "Goods",
        components: {
            NavBar, DialogView
        },
        data () {
            return {
                goods: [],
                uplusApi: new UplusApi(),
                userId: '',
                offUserId: '',
                errorImg: 'this.src="' + product + '"',
                page: 1
            }
        },
        created () {
            var self = this
            ……
            Request.getGoodsList(this.uplusApi, this.page, Global.entrance).then(result => {
                console.log('Goods created', result)
                var goodsList = result.retData.data.result.data
                for (let i=0;i<goodsList.length;i++) {
                    var goodsItem = goodsList[i]
                    // goodsItem.imgUrl = './../assets/product_bath.png'
                    goodsItem.imgUrl = 'product_bath.png'
                    // goodsItem.imgUrl = './../../static/product_bath.png'
                    if (i % 2 == 0) {
                        var item = goodsList.slice(i,i+2)
                        self.goods.push(item)
                    }
                    console.log('Goods created' + JSON.stringify(goodsItem))
                }
                console.log('Goods created' + self.goods.length)
            }).catch(error => console.log('Goods error', error))
           
        }
</script>