前言

老实讲，当我们学的还不深的时候。遇到想要下面这种情况
在这里插入图片描述

我们要是学的不够好，就比如我想在数据库里面传入一段网址当做图片呗，如下：
在这里插入图片描述

网址怎么拿的？CSDN啊，写博客的时候都有的，大家注意一下呗
在这里插入图片描述

使用技术前后端分离（SpringBoot+Vue）

那么后端就之间传一段网址过来撒，前端就将网址用img标签输出呗！

首先我们判断后端是否将网址传过来，如图
在这里插入图片描述

所以，我们还剩最后一步，前端将这个数据存入到img标签里面

对于这个步骤，我想说让人生不如死啊。网上百度好久啥也没有，问了老师，老师也有点没理解我的意思，但是老师讲出来，我并没有get到带你，反正其中艰辛不足为外人道也

唉，太难了！！！！！

标记重点一下代码区域：

在这里插入图片描述
在这里插入图片描述

应该懂那个冒号：是什么东西吧？就是那个v-bind，Vue语法里面的引入插值(不太懂的可以去Vue官网看看视频，简单了解一下)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--		引入vue-->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <!--		引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!--    引入layui样式-->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div id="app">
        <tr>
            <button @click="findbook">搜索</button>
        </tr>
        <table>
            <!-- thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。 -->
            <thead>
            <tr>
                <th>书籍照片</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="book in image">
<!--                <td><img :src="image[0].image"/></td>-->
                <td><img :src="book.image"/></td>
            </tr>
            </tbody>
        </table>

    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                image:[]
            },
            mounted() {
                this.findbook()
            },
            methods:{
                findbook() {
                    var that = this
                    //axios 获取网络
                    axios.post("http://localhost:8088/xiaoxiang/findImage"
                    ).then(function (res) { //请求成功
                        //回调方法里的this，只是调用方法体里面的参数，所以需要在外面将this定义好 JQuery
                        console.log(res.data)
                        that.image = res.data
                        console.log(this.that)
                    }).catch(function (err) { //请求失败
                        console.log(err)
                    })
                }
            }

        })
    </script>
</body>
</html>

总体代码我就给了前端，后端有点多，我就没给了…

最后鸣谢一下我同学大佬的帮助。拜谢

# html
Logo
亚马逊云科技技术品牌专区

更多推荐

STM32节点移植lorawan协议连接腾讯云物联网开发平台（IoT Explorer）

STM32移植lorawan协议连接腾讯云物联网开发平台（IoT Explorer）前言前言在移植协议之前，先给大家科普一下Lora 和 lorawan 的区别。LoRa 是LPWAN通信技术中的一种，是美国Semtech公司采用和推广的一种基于扩频技术的超远距离无线传输方案。这一方案改变了以往关于传输距离与功耗的折衷考虑方式为用户提供一种简单的能实现远距离、长电池寿命、大容量的系统，进而扩...

avatar 亚马逊云科技技术品牌专区
cover

物联网主机E6000引领工业自动化的新篇章

avatar 亚马逊云科技技术品牌专区

搞 IoT 物联网，你居然要懂这么多种协议...

物联网协议是指在物联网环境中用于设备间通信和数据传输的协议。根据不同的作用，物联网协议可分为传输协议、通信协议和行业协议。传输协议：一般负责子网内设备间的组网及通信。例如 Wi-Fi、Ethernet、NFC、 Zigbee、Bluetooth、GPRS、3G/4G/5G等。这些协议能够确保在网络上传输的数据的安全性和可靠性。通讯协议：主要是运行在传统互联网TCP/IP协议之上的设备通讯协议，负责

avatar 亚马逊云科技技术品牌专区