vue显示图片后端返回字符串

最新推荐文章于 2024-07-09 15:15:21 发布

ly2230976595

最新推荐文章于 2024-07-09 15:15:21 发布

阅读量6.4k

点赞数 1

分类专栏：前端文章标签： vue 后端字符串多张图片显示

本文链接：https://blog.csdn.net/ly2230976595/article/details/89553277

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue显示多张图片-接收后端数据

后端返回字段如下

可以看见，每张图片的相对路径我用逗号拼接。
前端接收主要代码

<ul style="padding: 3px">
          <li class="imgsh" id="imgUrls"><img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) "></li>
           <!--<li><img src="../../../image/video_pic/13163000.jpg"></li>-->
           <!--<li v-for ="item in imgurls" :key="item.url">-->
               <!--<img :src="item.url" alt="imgurls">-->
               <!--&lt;!&ndash;<p>{{item.CnName}}</p>&ndash;&gt;-->
           <!--</li>-->
</ul>

<img v-for="item in imgurls" :src="require(`../../../image/video_pic/${item}`) ">

src中主要是在vue的目录下建立了文件夹image，再在image下面建立video_pic。要存在vue的根目录才行。网上很多代码直接用变量访问**"…/…/image"** 这种类型的路径，也不知道他们是怎么成功的，反正我没有成功。
直接在src中这样访问当然没有问题，但是一旦加入变量根本不行，我找了好多资料，自己搞了半天才发现必须加require字段才行。不吐槽了

前端接收后端代码

getPicPath(this.sizeForm.hospitalcard)
   .then(response => {


      this.imgurls = response.data.split(',');
       console.log( this.imgurls);
       // const target = {};
       // let indexs = 0;
       // imgtemp.forEach(a=>{
       //     // console.log(a);
       //     const source = JSON.parse(`{"${indexs}":"${a}"}`);//造出对象
       //     indexs++;
       //     Object.assign(target,source);
       // });
       // console.log(target);

   })

我的代码进行整合了的，大家测试可以利用axios,直接访问后端端口的接口，比如：
在这里插入图片描述
这样就能成功了，保证能行。贴上我的效果图
这是我的效果图
4. 还有一种就是针对图片少的时候返回base64码的情况，后端当然是直接返回图片的base64码了。
前端是这样的

 <ul>
        <li class ="img_iden" id="imgUrl"></li>
  </ul>

在方法里面，接收返回的数据进行显示，代码为

// let imgurls =[];
            // imgurls = res.data.imgUrl.split(",");
            // for(let i=0;i<imgurls.length;i++){
            //     let img=new Image();
            //     img.src ="data:image/jpg;base64,"+imgurls[i];
            //     console.log(img.src);
            //     img.style.width = 148+"px";
            //     img.style.height = 148+"px";
            //     let imgContainer=document.getElementById("imgUrl");
            //     imgContainer.appendChild(img);
            // }

这段代码是可行的，只不过我不用这种方法了，就把它注释掉了。因为base64码太长了，我不好调试，占一大块屏幕。