The frontend code successfully retrieves the image links sent by the backend but encounters issues displaying them. Despite confirming that the imgUrl data is successfully fetched without any hotlink protection problems, the images are still not appearing on the screen. enter image description here Below is the updated code:
<template>
<div v-if="isLoading" class="loading-message">...</div>
<div v-else class="card-container">
<el-backtop :right="100" :bottom="100" />
<div class="card" v-for="(card, index) in cards" :key="index">
<div class="add-icon" @click="addToFavorites(card)">
<el-icon><IEpCirclePlus /></el-icon>
</div>
<div class="card-content">
<div class="left-content">
<img
v-if="card.imgUrl"
:src="card.imgUrl"
alt="Card Image"
class="card-image"
@click="handleButtonClick(card.link, index)"
@mouseover="card.isRotated = true"
@mouseout="card.isRotated = false"
:style="{ transform: card.isRotated ? 'rotate(360deg)' : 'rotate(0deg)' }"
/>
<div v-else class="loading-message">...</div>
</div>
<div class="right-content">
<h3>{{ card.name }}</h3>
<div class="divider"></div>
<p>{{ card.description }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
data() {
return {
cards: [],
maxFavorites: 12,
isLoading: true,
};
},
methods: {
async fetchDataFromApi() {
try {
const response = await axios.get("api/entertainmentTools/loadDataList");
const responseData = response.data;
if (responseData.status === "success" && responseData.code === 200) {
this.cards = responseData.data.map((card) => ({ ...card, isRotated: false }));
console.log(this.cards)
} else {
//
}
} catch (error) {
//
} finally {
this.isLoading = false;
}
},
handleButtonClick(link, index) {
window.open(link, "_blank");
this.cards.forEach((card, i) => {
card.isRotated = index === i;
});
},
addToFavorites(card) {
const favorites = JSON.parse(localStorage.getItem("favorites") || "[]");
if (favorites.length >= this.maxFavorites) {
ElMessageBox.alert("12", "", {
confirmButtonText: "",
callback: () => {
},
});
} else {
const favoriteCard = { name: card.name, imgUrl: card.imgUrl, link: card.link };
favorites.push(favoriteCard);
localStorage.setItem("favorites", JSON.stringify(favorites));
ElMessage.success("success");
}
},
},
async created() {
await this.fetchDataFromApi();
},
};
</script>
In a revised version of the code realizing potential data retrieval and rendering challenges, modifications were made to address these concerns. However, the issue persists as the images remain invisible on the interface.