从手机上渲染一张照片，同时在web上渲染4张照片

Question

在web浏览器中有四个通过API呈现的图像。
我想在手机上打开时只渲染一张照片，实现这一目标的可能方法是什么?

数据将所有图像集合在一起。

<template>
<div
class="
fusion-fullwidth
fullwidth-box
fusion-builder-row-6
hundred-percent-fullwidth
non-hundred-percent-height-scrolling
fusion-equal-height-columns
"
style="
background-color: #3e3731;
background-position: left top;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
border-width: 0px 0px 0px 0px;
border-color: #eae9e9;
border-style: solid;
"
>
<div class="fusion-builder-row fusion-row">
<div
v-for="(collection, index) in box_collections"
:key="collection.bo_id"
:class="
'fusion-layout-column fusion_builder_column fusion-builder-column-' +
(index + 11) +
' fusion_builder_column_1_4 1_4 fusion-one-fourth fusion-no-small-visibility'
"
style="margin-top: 0px; margin-bottom: 0px"
>
<div
class="fusion-column-wrapper fusion-flex-column-wrapper-legacy"
:style="
'background-image: url('' +
collection.bo_url +
''); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 0px; min-height: 252px; height: auto;'
"
:data-bg-url="collection.bo_url"
>
<div
class="fusion-column-content-centered"
style="min-height: 252px; height: auto"
>
<div class="fusion-column-content">
<div class="fusion-sep-clear" />
<div
class="fusion-separator fusion-full-width-sep"
style="
margin-left: auto;
margin-right: auto;
margin-top: 250px;
width: 100%;
"
/>
<div class="fusion-sep-clear" />
</div>
</div>
<div class="fusion-clearfix" />
</div>
</div>
</div>
</div>
</template>

要我重新取吗?或者还有其他解决办法吗?

Answer 1

我将如何实现这种特性。

<template>
<div>
<pre>all the interesting images: {{ pokemon.sprites.other }}</pre>
<div class="reference-breakpoint"></div>
<p>Down below are all the remaining images ⬇️</p>
<img :src="pokemon.sprites.other.dream_world.front_default" />
<img
class="hide-when-mobile"
loading="lazy"
:src="pokemon.sprites.other.home.front_default"
/>
<img
class="hide-when-mobile"
loading="lazy"
:src="pokemon.sprites.other.home.front_shiny"
/>
<img
class="hide-when-mobile"
loading="lazy"
:src="pokemon.sprites.other['official-artwork'].front_default"
/>
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
const pokemon = await $axios.$get(
'https://pokeapi.co/api/v2/pokemon/charizard'
)
return { pokemon }
},
}
</script>
<style scoped>
img {
display: block;
height: 100vh;
width: auto;
}
.reference-breakpoint {
width: 1000px;
height: 1rem;
background-color: red;
}
@media (max-width: 1000px) {
.hide-when-mobile {
display: none;
}
}
</style>