使用 Axios 取得 API

const { onMounted } = Vue;
const app = {
  setup() {
    onMounted(() => {
      // 在DOM元素渲染完成後執行
      axios
        .get("https://vue-lessons-api.herokuapp.com/photo/list")
        .then((res) => {
          console.log(res.data);
        });
    });
    return {};
  },
};

Axios 渲染資料

<div class="box">
  <div>
    <img
      v-for="(item, i) in imgArray.arr"
      :key="item.url"
      v-show="ImgIdx === i"
      class="img"
      :src="item.url"
    />
  </div>
  <div class="btnbox">
    <a href="javascript:;" @click="ImgIdxRemove">上一張</a>
    <a href="javascript:;" @click="ImgIdxAdd">下一張</a>
  </div>
</div>

const { onMounted, reactive, ref } = Vue;
const app = {
  setup() {
    const imgArray = reactive({ arr: [] }); // 將取得的資料放進陣列
    const ImgIdx = ref(0); // 圖片索引
    const ImgIdxAdd = () => {
      ImgIdx.value++;
      if (ImgIdx.value > imgArray.arr.length - 1) {
        ImgIdx.value = 0; // 大於總數量時返回第一張
      }
    };
    const ImgIdxRemove = () => {
      ImgIdx.value--;
      if (ImgIdx.value < 0) {
        ImgIdx.value = imgArray.arr.length - 1; //小於0時返回最後一張
      }
    };
    onMounted(() => {
      axios
        .get("https://vue-lessons-api.herokuapp.com/photo/list")
        .then((res) => {
          imgArray.arr = res.data;
        });
    });
    return { imgArray, ImgIdx, ImgIdxAdd, ImgIdxRemove };
  },
};

加入 loading 效果

<div class="box" v-if="isLoad">
  <div>
    <img
      v-for="(item, i) in imgArray.arr"
      :key="item.url"
      v-show="ImgIdx === i"
      class="img"
      :src="item.url"
    />
  </div>
  <div class="btnbox" v-if="isLoad">
    <a href="javascript:;" @click="ImgIdxRemove">上一張</a>
    <a href="javascript:;" @click="ImgIdxAdd">下一張</a>
  </div>
</div>
<img v-if="!isLoad" class="load" src="./images/load.gif" alt="" />

const imgArray = reactive({ arr: [] }); // 將取得的資料放進陣列
const ImgIdx = ref(0);
const isLoad = ref(false);
const ImgIdxAdd = () => {
  ImgIdx.value++;
  if (ImgIdx.value > imgArray.arr.length - 1) {
    ImgIdx.value = 0; // 大於總數量時返回第一張
  }
};
const ImgIdxRemove = () => {
  ImgIdx.value--;
  if (ImgIdx.value < 0) {
    ImgIdx.value = imgArray.arr.length - 1; //小於0時返回最後一張
  }
};

const handImgLoad = (imgArr) => {
  let i = 0; // 透過i記錄loading跑完沒
  imgArr.forEach((image) => {
    const newImage = new Image(); // 建立Image實體
    newImage.src = image.url; // 透過src去觸發onload事件
    newImage.onload = () => {
      i++;
      if (imgArr.length === i) {
        //圖片跑完後執行
        imgArray.arr = imgArr;
        isLoad.value = true;
      }
    };
  });
};

onMounted(() => {
  axios.get("https://vue-lessons-api.herokuapp.com/photo/list").then((res) => {
    handImgLoad(res.data);
  });
});
return { imgArray, ImgIdx, isLoad, ImgIdxAdd, ImgIdxRemove };