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

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

 

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

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

结构：

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

<el-table :data="myData.list" stripe border>

     <el-table-column label="宠物照" width="100px">

        <template  slot-scope="scope">

           <img :src="scope.row.url" alt="这是图片">

        </template>

     </el-table-column>

     <el-table-column prop="pets_id" label="宠物编号"></el-table-column>

     <el-table-column prop="pet_name" label="用户名"></el-table-column>

     <el-table-column prop="kind" label="品种"></el-table-column>

     <el-table-column prop="species" label="类别"></el-table-column>

     <el-table-column prop="color" label="毛发颜色"></el-table-column>

</el-table>

渲染页面的时候，最主要的代码：      

    <template  slot-scope="scope">

          <img :src="scope.row.url" alt="这是图片">

    </template>

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

比较坑的地方是一开始 这里<img :src="scope.row.url" alt="这是图片">路径容易弄错，一开始用的是v-for循环，后来想到elementUI组件自带的参数，可以直接使用scope.row，不用自己去循环遍历。

问题解决

------------------------------------------------------------------------------------------------------------------------------

鉴于 比较多小伙伴来问全部的代码，私信比较多有时候忘了回。这里贴上代码地址，自行取，仅供学习参考用。

github 的地址在这 ：
https://github.com/tulip23/PetsWeChatProject

或者直接下载 

GitHub - tulip23/PetsWeChatProject: nodejs+vuejs+MySQL+微信小程序

不过运行项目时后台 服务可能需要你们自己配，因为后台服务处理图片路径时用的是nginx 映射本地图片地址，你们也可以用虚拟机代替。