当前位置：首页 > news >正文

vue3：动态渲染后端返回的图片

news 来源：原创 2025/5/7 4:38:19

问：

div class='left-png'
这里我用css设置了他的背景图片，但是现在我希望改为后端返回的图片，怎么写？
后端返回数据：
const centerdata= {img:;xxxx,title,xxxx,num:xxxx}？

回答：

好的，下面是一个使用Vue 3的`setup`语法的示例，展示如何动态设置背景图片：

<template>
  <div :class="['left-png', { 'loading': !centerdata }]" :style="{ backgroundImage: `url(${centerdata?.img})` }">
    <!-- 其他内容 -->
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const centerdata = ref(null);

    const fetchCenterdata = async () => {
      // 模拟后端返回数据
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            img: 'https://example.com/path/to/your/image.jpg',
            title: 'Example Title',
            num: 123
          });
        }, 1000);
      });
    };

    onMounted(async () => {
      const data = await fetchCenterdata();
      centerdata.value = data;
    });

    return {
      centerdata
    };
  }
};
</script>

<style scoped>
.left-png {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
}

.loading {
  background-image: url('https://example.com/path/to/loading/image.jpg'); /* 加载时的占位图片 */
}
</style>

在这个示例中：

1. 使用`ref`来创建一个响应式数据`centerdata`，初始值为`null`。
2. 使用`onMounted`钩子在组件挂载时调用`fetchCenterdata`函数，模拟从后端获取数据。
3. 在模板中，使用`:style`动态绑定背景图片，并使用`centerdata?.img`确保在`centerdata`为`null`时不会报错。
4. 使用`:class`动态绑定类名，在数据加载时显示加载中的占位图片。

你可以根据实际情况替换模拟数据部分为实际的数据获取逻辑。