vue项目前端渲染后台数据：图片和页面详情

最新推荐文章于 2023-12-06 10:19:00 发布

milli236

最新推荐文章于 2023-12-06 10:19:00 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/milli236/article/details/82740759

Vue.js 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种前后端协作的方法，包括如何在前端页面上正确显示从后端获取的图片路径，以及如何渲染从后端传来的百度富文本编辑器的数据。通过示例代码展示了具体的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.从后台获取图片处理

需要对图片字符拼接

<img :src="host+'/'+list.pro_img" alt="">
//
<img :src="'http://www.xxx.com'+'/'+list.pro_img" alt="">



data () {
    return {
      msg: 'Welcome to Home.vue App sss',
      host:'http://www.xxx.cn/xx/xx/xx/uploads',
      soList:null,

    }
  },

2.前端渲染后台的百度富文本数据

            <div>
              <p>标题：{{dataBase.pro_title}}</p>
              <p>价格：{{dataBase.pro_price}}</p>
              <!-- <p>详情：{{dataDet.det_desc}}</p> -->
              <div v-html="dataDet.det_desc"></div>
            </div>