Hay cuatro imágenes renderizadas desde una API en el navegador web.
Quiero renderizar solo una foto mientras la abro desde el móvil, ¿cuáles son las posibles formas de lograrlo?
Los datos reunieron todas las imágenes.
<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>¿Los recupero? ¿O hay alguna otra solución?
Así es como lograría este tipo de función.
<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>