更正
This commit is contained in:
zhcnyuyang
parent
18bfe171c0
commit
cd6abcea3b
@ -55,6 +55,20 @@ export default {
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
getImageUrl(url) {
|
||||
if (!url) return '';
|
||||
|
||||
// 如果是完整的URL（以http或https开头），去掉域名部分，转换成相对路径
|
||||
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>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link v-for="(item, index) in this.types"
|
||||
:key="index":to="{ name: 'Examples', query: {type:item} }"
|
||||
:key="index" :to="{ name: 'Examples', query: {type:item} }"
|
||||
style="text-decoration: none;">
|
||||
<div class="typebar"
|
||||
:class="{ active: ($route.query.type === item)}">
|
||||
@ -41,14 +41,21 @@
|
||||
:href="`/ExampleItem?createdAt=${item.createdAt}`"
|
||||
>
|
||||
<div class="listblock">
|
||||
<img :src="`${this.$axios.defaults.baseCDNURL}${item.headimage.formats.large.url}`" alt="" />
|
||||
<div class="itemtext">
|
||||
<span class="upspan">
|
||||
{{item.brandname_cn}}
|
||||
</span>
|
||||
<span class="downspan">
|
||||
{{item.projectname_cn}}
|
||||
</span>
|
||||
<img
|
||||
:src="getImageUrl(item.headimage)"
|
||||
alt=""
|
||||
@error="handleImageError"
|
||||
/>
|
||||
|
||||
<div id="itemon">
|
||||
<div class="itemtext">
|
||||
<span class="upspan">
|
||||
{{item.brandname_cn}}
|
||||
</span>
|
||||
<span class="downspan">
|
||||
{{item.projectname_cn}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -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;
|
||||
|
||||
// 如果是完整的URL（以http或https开头），去掉域名部分，转换成相对路径
|
||||
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%;
|
||||
|
||||
@ -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 '';
|
||||
|
||||
// 如果是完整的URL（以http或https开头），去掉域名部分，转换成相对路径
|
||||
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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user