[vue]外层数组循环内层数组的数据

我从后端拿到的数据没有背景图片的地址，而我需要背景图片，故要添加本地图片的路径，循环后端拿到的数据，有4个，防止之后添加这个数据，所以循环添加本地背景图片的数组。（代码块是vue3的）


/*读书专题*/
api.ReadingTopics().success((res)=>{
  // state.ReadTopicsList=res.data;
  let backgroundImageArr=[require("./image/topic1.png"),require("./image/topic2.png"),require("./image/topic3.png"),require("./image/topic4.png")]
  let arrlength=res.data.length;

  state.ReadTopicsList=res.data.map((item,index)=>{
    console.log(index%arrlength)
    return{
      ...item,
      backgroundImageUrl:backgroundImageArr[index%arrlength]
    }
  })
  console.log(state.ReadTopicsList)
})

<div v-for="(item,index) in state.ReadTopicsList"
     :key="index"
     :style="{backgroundImage:`url(${item.backgroundImageUrl})`}">
  <span>item.name </span>
</div>