×

Web前端开发:关于vue中导入数组图片不能显示的解决方案

作者:Web前端之家2020.03.04来源:Web前端之家浏览:2021评论:1
关键词:vueimg
微信公众号

微信公众号

500.jpg

关于vue,相信前端童鞋都会了解一些,现在被很多公司应用,它越来越成熟了,各种关联框架也随之兴起;并且相对于react,学习成本没那么高,但是要学好,需要不少的努力和实践。众所周知,vue里有很多坑,今天就来聊聊个话题:Web前端开发里关于vue种导入数组图片不能显示的解决方案。

我们这里来举例来分析,会更清晰。先看段我弄的一个DEMO代码:

自定义数组代码:

data(){
        return {            
            items:[
                {id:'1',count:'1',name:'苹果',price:'5',img:'../assets/img/1.png'},
                {id:'2',count:'1',name:'李子',price:'6',img:'../assets/img/2.png'},
                {id:'3',count:'1',name:'西红柿',price:'7',img:'../assets/img/3.png'},
                {id:'4',count:'1',name:'葡萄',price:'8',img:'../assets/img/4.png'}          
            ],            
            active:true
        }
},

模板代码:

<template>
    <div class="storedatebox">
        <h2 class="hfon">VUE表模糊搜索和价格列表调整DEMO</h2>
        <div class="store-search"><input type="text" name="" id="" placeholder="请输入产品名称"></div>
        <table cellspacing="0" cellpadding="0" border="0" width="100%" class="tablelist">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>产品</th>
                    <th>图片</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>总价</th>
                    <th>选择</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(item,index) in items' :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td><img src="item.img" alt=""></td>
                    <td>
                        <input :disabled='item.count == 0' type="button" value="-" @click='item.count--'>
                        <span>{{item.count}}</span>
                        <input type="button" value="+" @click='item.count++'>
                    </td>
                    <td>{{item.price | formatMoney(2)}}元</td>
                    <td>{{item.price * item.count  |  formatMoney(3)}}元</td>
                    <td><input type="checkbox" v-model="active"></td>
                </tr>
            </tbody>
        </table>
        <p class="data-info">{{totalCount}}件商品总计:{{totalPrice | formatMoney(3)}}元</p>
    </div>
</template>

我们这里有个表格需要遍历数据,发现图片显示不出来,如下图

QQ截图20200304155546.jpg

一般我们查找图片不显示的原因,会从图片的路径问题去排查,发现路径都是对的,也是不行。后续查了下官方API,需要对于数组内里的img_url加个require处理。代码如下:

data(){
        return {            
            items:[
                {id:'1',count:'1',name:'苹果',price:'5',img:require('../assets/img/1.png')},
                {id:'2',count:'1',name:'李子',price:'6',img:require('../assets/img/2.png')},
                {id:'3',count:'1',name:'西红柿',price:'7',img:require('../assets/img/3.png')},
                {id:'4',count:'1',name:'葡萄',price:'8',img:require('../assets/img/4.png')}             
            ],            
            active:true
        }
},

运行走起,发现还是没显示,此时此刻,有些童鞋就懵了。其实这些问题排除后,我们应该再去考虑遍历的时候,获取图的url方式是否正确,发现代码是这样的:

<img src="item.img" alt="">

其实这个是不对的,对于获取属性的时候,vue官方说明需要使用绑定元素属性的方法v-bind,所以我们需要改下这里的代码:

<img :src="item.img" alt="">

前面的分号就是v-bind的缩写,我们在运行下:

QQ截图20200304161108.jpg

问题终于解决了。那么我再问问大家,我把图片路径地址写成带有域名或者IP的,结果会如何。

比如:

{id:'1',count:'1',name:'苹果',price:'5',img:require('https://jiangweishan.com/zb_users/theme/Nobird_CMS_3/style/images/nlogo.png')},

运行下结果:

QQ截图20200304160523.jpg

发现已经报错了,提示项目中找不到此图,要求我们去install;因此我们要避免这种方式要去调用图片,还是保存到项目文件夹中,再采用最上面的方法调用。

总结

关于vue中图片不能显示的问题,基本就这些,如您有问题可以加QQ群进行咨询。vue还有很多坑,慢慢踩,不断进步。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vue20200304.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

  • 访客

    你可以加群去问...

  • 访客

    怎么注册?不会...

  • ajoy

    说法可以是一样的,毕竟JS和JQ都是有“血缘关系”的,你可以自己改下不就可以了吗,哈哈!...

  • 访客

    标题是JS用了JQ误人子弟呢...

  • absoy

    vue居然还能这么玩,期待你们vue3.0中文版教程。...

  • caij2

    github也中了新冠病毒了吧,哈哈!...

  • 访客

    收藏啦...

  • Web前端之家

    当然都可以被import,如何去设置,还要看你的具体项目要求。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.4 Valyria