vue+elementUI +mysql获取后台返回的图片路径动态渲染页面

先上图,做出来的效果是这样的

vue+elementUI +mysql获取后台返回的图片路径动态渲染页面_第1张图片

 图片放在服务器下,mysql保存图片路径,数据类型为varchar

后台接口是用nodejs写的,查询数据库,前端调用接口,返回数据给前端

结构:

vue+elementUI +mysql获取后台返回的图片路径动态渲染页面_第2张图片

url字段存储的是图片的路径 

                    

                        

                            

                        

                    

                    

                    

                    

                    

                    

                    

                    

                    

                    

                    

                        

                            查看

                        

                    

                    

                        

                            编辑

                            删除

                        

                    

                

渲染页面的时候,最主要的代码:

                        

                            

                        

这里的slot相当于一个小插槽,名为scope,:src绑定图片的路径,scope.row.url为获取当前所在的行的那条数据的url

 

比较坑的地方是一开始 这里路径容易弄错,一开始用的是v-for循环,后来想到elementUI组件自带的参数,可以直接使用scope.row,不用自己去循环遍历。

问题解决

 

 

 

 

你可能感兴趣的:(vue.js,node.js,前端)