Vue接受后端数据库网址图片，并在浏览器上显现出来

最新推荐文章于 2024-07-24 21:04:47 发布

专注学习java

最新推荐文章于 2024-07-24 21:04:47 发布

阅读量7.1k

点赞数 11

分类专栏：前端文章标签： vue html

本文链接：https://blog.csdn.net/weixin_45969142/article/details/111246997

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文记录了一位开发者在尝试通过Vue从后端获取图片URL并显示在前端时遇到的困难。在SpringBoot后端提供图片URL后，前端使用Vue的v-bind语法将URL绑定到img标签实现图片展示。通过引入Vue、axios和Element-UI库，实现了前后端数据交互和页面渲染。最终在同学的帮助下解决了问题。

摘要由CSDN通过智能技术生成

前言

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

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

网址怎么拿的？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>