英文:
The page cannot display images？
问题
前端代码已成功获取后端发送的图像链接，但无法显示它们。在检查控制台中的 "cards" 后，显示 imgUrl 已成功检索。当确保图像链接有效且没有热链接保护等问题时，仍无法显示。
以下是完整的代码：
<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 {
// Handle error
}
} catch (error) {
// Handle 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: () => {
// Handle alert confirm
},
});
} 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>
在代码的第一个版本中，考虑到在组件中进行数据检索和渲染过程中可能出现的潜在问题，代码已修改为其当前状态。但是，它仍然无法显示。
英文:
The frontend code has successfully obtained the image links sent by the backend, but it is unable to display them. After checking the console for "cards," it shows that the imgUrl has been successfully retrieved.When it is guaranteed, the image links are valid and free from issues such as hotlink protection.
enter image description here
Here is the complete 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 the first version of the code, considering the potential issues that might arise during the data retrieval and rendering process in the component, the code was modified to its current state. However, it still fails to display.
答案1
得分: 0
card.imgUrl与您的数据键imgurl不匹配。字母"u"没有大写。
英文:
card.imgUrl doesn't match your data key imgurl. the u is not capitalized.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论