This commit is contained in:
zhcnyuyang 2025-08-30 21:39:12 +08:00
parent 18bfe171c0
commit cd6abcea3b
3 changed files with 85 additions and 19 deletions

View File

@ -55,6 +55,20 @@ export default {
}else{
}
},
getImageUrl(url) {
if (!url) return '';
// URLhttphttps
if (url.startsWith('http://') || url.startsWith('https://')) {
// <EFBFBD><EFBFBD><EFBFBD>
const urlObj = new URL(url);
const relativePath = urlObj.pathname;
return `${this.$axios.defaults.baseCDNURL}${relativePath}`;
} else {
// CDN URL
return `${this.$axios.defaults.baseCDNURL}${url}`;
}
}
},
created() {
@ -76,9 +90,9 @@ export default {
<template>
<div id="passageroot" class="pageroot" v-if="psginfo">
<div id="passagebanner" class="pagebanner">
<img :src="`${this.$axios.defaults.baseCDNURL}${psginfo.mobileheadimage.url}`"
<img :src="getImageUrl(psginfo.mobileheadimage?.url)"
v-if="breakpoint==='xs'||breakpoint==='sm'" alt="" id="bannerimg"/>
<img :src="`${this.$axios.defaults.baseCDNURL}${psginfo.headimage.url}`"
<img :src="getImageUrl(psginfo.headimage?.url)"
v-else alt="" id="bannerimg"/>
<div id="bannercontentfill"
style="width: 100%;height: 100%;
@ -120,11 +134,11 @@ export default {
<div v-for="(item, index) in psginfo.images" :key="index"
class="imglistitem"
style="width: 100%; height: auto;">
<img :src="`${this.$axios.defaults.baseCDNURL}${item.url}`" v-if="item.mime.startsWith('image',0)" alt="" />
<img :src="getImageUrl(item.url)" v-if="item.mime.startsWith('image',0)" alt="" />
<video v-else-if="item.mime.startsWith('video',0)" controls="controls">
<source :src="`${this.$axios.defaults.baseCDNURL}${item.url}`" type="video/mp4">
<source :src="`${this.$axios.defaults.baseCDNURL}${item.url}`" type="video/ogg">
<source :src="`${this.$axios.defaults.baseCDNURL}${item.url}`" type="video/webm">
<source :src="getImageUrl(item.url)" type="video/mp4">
<source :src="getImageUrl(item.url)" type="video/ogg">
<source :src="getImageUrl(item.url)" type="video/webm">
</video>
</div>
</div>

View File

@ -41,7 +41,13 @@
:href="`/ExampleItem?createdAt=${item.createdAt}`"
>
<div class="listblock">
<img :src="`${this.$axios.defaults.baseCDNURL}${item.headimage.formats.large.url}`" alt="" />
<img
:src="getImageUrl(item.headimage)"
alt=""
@error="handleImageError"
/>
<div id="itemon">
<div class="itemtext">
<span class="upspan">
{{item.brandname_cn}}
@ -51,6 +57,7 @@
</span>
</div>
</div>
</div>
</a>
</div>
</div>
@ -80,10 +87,10 @@ export default {
if (Array.isArray(resp)) {
this.types = resp;
if (this.types.length === 0) {
this.error = "返回的数组为";
this.error = "返回的数组为<EFBFBD><EFBFBD><EFBFBD>";
}
} else {
this.error = "返回的据不是数组";
this.error = "返回的<EFBFBD><EFBFBD><EFBFBD>据不是数组";
this.types = [];
}
})
@ -108,7 +115,7 @@ export default {
reqarg='/api/examples?fields=id,brandname_cn,projectname_cn,createdAt&populate=headimage&filters[example_type]='+type+'&sort=createdAt:desc';
}
if (this.$route.name != 'Examples'){
let reqarg='/api/examples?fields=id,brandname_cn,projectname_cn,createdAt&populate=headimage&pagination[page]=1&pagination[pageSize]=5&sort=createdAt:desc';
reqarg='/api/examples?fields=id,brandname_cn,projectname_cn,createdAt&populate=headimage&pagination[page]=1&pagination[pageSize]=5&sort=createdAt:desc';
}
axios.get(reqarg)
.then(response =>{
@ -134,6 +141,24 @@ export default {
.finally(() => {
this.isLoading = false;
});
},
getImageUrl(image) {
const url = image.url;
// URLhttphttps
if (url.startsWith('http://') || url.startsWith('https://')) {
//
const urlObj = new URL(url);
const relativePath = urlObj.pathname;
return `${this.$axios.defaults.baseCDNURL}${relativePath}`;
} else {
// CDN URL
return `${this.$axios.defaults.baseCDNURL}${url}`;
}
},
handleImageError(event) {
//
event.target.src = 'path/to/default/image.jpg'; //
}
},
mounted() {
@ -155,6 +180,16 @@ export default {
<style scoped lang="scss">
@import "src/publicstyle.scss";
#itemon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
z-index: 2;
}
#listmain{
display: grid;
@include media-breakpoint-between(xs, md) {
@ -188,6 +223,9 @@ export default {
}
}
.listblock img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
@include media-breakpoint-between(xs, md){
width: 100%;

View File

@ -9,7 +9,7 @@
<div v-for="item in logos"
class="partneritempanel" id="ptn01">
<div class="partnerlogodiv">
<img :src="`${this.$axios.defaults.baseCDNURL}${item.url}`" alt="" />
<img :src="getImageUrl(item.url)" alt="" />
</div>
</div>
</div>
@ -44,6 +44,20 @@ export default {
console.error(err);
this.logos = [];
});
},
getImageUrl(url) {
if (!url) return '';
// URLhttphttps
if (url.startsWith('http://') || url.startsWith('https://')) {
//
const urlObj = new URL(url);
const relativePath = urlObj.pathname;
return `${this.$axios.defaults.baseCDNURL}${relativePath}`;
} else {
// CDN URL
return `${this.$axios.defaults.baseCDNURL}${url}`;
}
}
},
mounted() {