图片路径调整

This commit is contained in:
dzl
2025-09-02 17:05:49 +08:00
parent 80ddefec0f
commit 8d50c6dadf
14 changed files with 144 additions and 73 deletions

View File

@@ -23,18 +23,18 @@
style="min-height: 300px;"
>
<el-carousel-item v-for="(image, index) in firstProduct.images" :key="index">
<img :src="image" :alt="firstProduct.name" class="carousel-image" />
<img :src="getImageUrl(image)" :alt="firstProduct.name" class="carousel-image" />
</el-carousel-item>
</el-carousel>
</div>
<div class="product-details">
<img :src="firstProduct.image" :alt="firstProduct.name" class="small-image" />
<img :src="getImageUrl(firstProduct.image)" :alt="firstProduct.name" class="small-image" />
<div class="product-info">
<span class="product-name">{{ firstProduct.name }}</span>
<div class="product-price">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ firstProduct.rongdou_price }}</span>
</div>
<div class="sub-price">
@@ -68,18 +68,18 @@
style="min-height: 300px;"
>
<el-carousel-item v-for="(image, index) in (productDetailsCache[product.id]?.images || [])" :key="index">
<img :src="image" :alt="product.name" class="carousel-image" />
<img :src="getImageUrl(image)" :alt="product.name" class="carousel-image" />
</el-carousel-item>
</el-carousel>
</div>
<div class="product-details">
<img :src="product.image" :alt="product.name" class="small-image" />
<img :src="getImageUrl(product.image)" :alt="product.name" class="small-image" />
<div class="product-info">
<span class="product-name">{{ product.name }}</span>
<div class="product-price">
<div class="main-price">
<img src="/imgs/profile/融豆.png" alt="融豆" class="rongdou-icon" />
<img :src="getImageUrl('/imgs/profile/融豆.png')" alt="融豆" class="rongdou-icon" />
<span class="rongdou-price">{{ product.rongdou_price }}</span>
</div>
<div class="sub-price">
@@ -145,12 +145,7 @@ const getProducts = async () => {
console.error('无法解析的商品数据格式:', data)
}
// 处理商品图片路径
products.value.forEach(product => {
if (product.image) {
product.image = getImageUrl(product.image)
}
})
// 不需要预处理图片路径在模板中使用getImageUrl处理
console.log('解析后的商品数据:', products.value)
@@ -174,13 +169,7 @@ const getFirstProduct = async () => {
firstProduct.value = productRes.data.data.product
// 处理第一个商品的图片路径
if (firstProduct.value.image) {
firstProduct.value.image = getImageUrl(firstProduct.value.image)
}
if (firstProduct.value.images && Array.isArray(firstProduct.value.images)) {
firstProduct.value.images = firstProduct.value.images.map(img => getImageUrl(img))
}
// 不需要预处理图片路径在模板中使用getImageUrl处理
} catch (error) {
ElMessage.error('获取商品详情失败')
console.log(error)
@@ -244,13 +233,7 @@ const loadAllProductDetails = async () => {
const newCache = { ...productDetailsCache.value }
results.forEach(result => {
if (result) {
// 处理缓存商品的图片路径
if (result.product.image) {
result.product.image = getImageUrl(result.product.image)
}
if (result.product.images && Array.isArray(result.product.images)) {
result.product.images = result.product.images.map(img => getImageUrl(img))
}
// 不需要预处理图片路径在模板中使用getImageUrl处理
newCache[result.id] = result.product
}
})