为什么我的page页面会重复渲染两次书本的封面图？

Question

<template>
  <div class="page_views" ref="pageViews"  tabindex="0" @keydown="handleKeyDown">
    <Menu :val="user.pageIdx" @meuId="chengmenu"></Menu>
    <div class="page_contents">
      <template v-if="titles">
        <div class="page_content" v-show="user.pageIdx !==1">
          <p class="page_title">{{ titles.title }}</p>
          <div class="page_title_right">
            <input type="number"

                   v-model="inputPage"
                   @blur="updatePage"
                   @keydown.enter="updatePage"
                   class="page_input"/>
            <p>/{{ total.total_page }} 页</p>
          </div>
        </div>
        <div class="book-cover"
             v-if="bookInfo.cover_pic != null && user.pageIdx === 1"
             :style="{backgroundImage: 'url(' + bookInfo.cover_pic + ')'}">
        </div>
        <div class="raw_text" v-html="titles.content" v-if="user.pageIdx !==1" @click="openImage"></div>
      </template>
      <img :src="KeyDownLeft" alt="keyDownLeft-Icon" class="keyDownLeft Icon" @click="prevPage">
      <img :src="KeyDownRight" alt="KeyDownRight-Icon" class="KeyDownRight Icon" @click="nextPage">
      <img :src="Quit" alt="KeyDownQuit-Icon" class="KeyDownQuit Icon" @click="Exithand">
    </div>
    <Sunny/>
    <div class="demo-image">
      <el-image-viewer
          v-if="imageViewer"
          :url-list="previewList"
          :hide-on-click-modal="true"
          @close="imageClose"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import Menu from "../../components/Menu/index.vue";
import {getinfo, getpage} from '../../api';
import {onMounted, ref} from "vue";
import {useReadStore} from "../../stores/readstore.ts"
import router from "../../router";
import KeyDownLeft from '../../assets/svg/Left.svg'
import KeyDownRight from '../../assets/svg/Right.svg'
import Quit from '../../assets/svg/Quit.svg'
import Sunny from '../../components/Sunny/index.vue'
import {Page} from "../../types/page.ts";
//输入框获取焦点
const pageViews = ref<HTMLElement | null>(null);
const readstore = useReadStore();
const titles: any = ref('');
const bookInfo: any = ref('');
const inputPage: any = ref(1);
//图片预览数组
const previewList = ref(new Array<string>());
// 图片预览
const imageViewer = ref(false);
onMounted(() => {
  const page=readstore.getBook('page');
  localPage(page,user,pageViews);
  //等待恢复到刷新前查看的书籍页数在发起请求
  LocalHttp();
})
const total: any = ref('');
let pageCount = 0;
let user: any = {
  bookId: readstore.getBook('book').bookId,
  pageIdx: 1,
  size: 2
};

/**
 * 利用本地存储覆盖user值
 * 完成页面刷新不会重新回到第一页
 * @param val 本地存储值 key page
 * @param viwes ref 值
 * @param use 当前值
 */
const localPage = (val: any,use:any, viwes: any) => {
  if (val && val.pageIdx) {
    use.pageIdx = val.pageIdx;
  }
  if (viwes) {
    viwes.value.focus;
  }
}

const LocalHttp = async () => {

  await http(user);
}

const http = (val: any) => {

  getinfo(val).then(res => {
    total.value = res.data.results[0];
    bookInfo.value = res.data.results[0];
    console.log(bookInfo.value.cover_pic);
  });

  getpage(<Page>val).then(res => {
    titles.value = res.data.results[0];
    inputPage.value = user.pageIdx;
  })

}
/**
 * Menu子组件传值点击目录页数
 * 完成目录跳转页面
 * @param val
 */
const chengmenu = async (val: any) => {
  user.pageIdx = val;
  await http(user);
  readstore.setBook('page', user);
};
/**
 * 上一页下一页
 *键盘按键事件处理
 */
//节流翻页事件;
const handleKeyDown = async (event: KeyboardEvent) => {
  if (imageViewer.value) {
    return
  }
  let keys: Map<string, ((event: KeyboardEvent) => Promise<void>) | (() => void)> = new Map([
    ['ArrowLeft', prevPage],
    ['d', nextPage],
    ['a', prevPage],
    ['w', () => {
      Quitopen();
    }],
    ['ArrowRight', nextPage],
    ['Escape', Exithand],
  ]);
  const action = keys.get(event.key);
  if (action) {
    await action(event);
  }

};
/**
 * 上一页
 */
const prevPage = async () => {
  user.pageIdx = user.pageIdx > 1 ? user.pageIdx - 1 : user.pageIdx;
  readstore.setBook('page', user);
  await http(user);
};

/**
 * 下一页
 */
const nextPage = async () => {
  user.size = pageCount == 1 ? 2 : 5
  user.pageIdx++;
  readstore.setBook('page', user);
  await http(user);
};

const Exithand = async () => {
  await router.push('/');
}

const updatePage = async () => {
  const page = Number(inputPage.value);
  if (page >= 1 && page <= total.value.total_page) {
    user.pageIdx = page;
    readstore.setBook('page', user);
    await http(user);
  } else {
    inputPage.value = user.pageIdx; // 如果输入的页码无效，重置为当前页码
  }
};

/**
 * 关闭图片预览
 */
const imageClose = () => {
  imageViewer.value = false;
}

/**
 * 点击图片后开启预览
 * @param event
 */
const openImage = (event: any) => {
  const target = event.target;
  if (target.src != undefined) {
    previewList.value = [target.src];
    imageViewer.value = true;
  }
}
const Quitopen = () => {
  if (imageViewer.value) {
    imageViewer.value = false;
    return;
  }

  let imageList = document.querySelectorAll(".raw_text img");
  let srcList = new Array<string>();
  for (let img of imageList) {
    let src = img.attributes.getNamedItem("src");
    if (src instanceof Attr && src.value != null) {
      srcList.push(src.value);
    }
  }

  if (srcList.length != 0) {
    previewList.value = srcList;
    imageViewer.value = true;
  }
}

</script>

为什么我的这个page页面会重复渲染两次书本的封面图片

我打印拼接的路径为undefined请求成功但是状态码为304能拿到图片我的图片路径是拿到后端返回的片段路径进行拼接的