Displaying a single photo on mobile, while simultaneously showing four photos on the web using Nuxt.js

When viewing the web browser from a mobile device, only one image should be displayed instead of all four images fetched from an API. What are some possible ways to achieve this?

The data retrieved includes all the images at once.

<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>

Should I retrieve them again or is there another solution available?

javascriptvue.jsnuxt.jsrendering

Answer №1

Below is my approach to implementing a feature like this.

<template>
  <div>
    <pre>Check out these captivating images: {{ pokemon.sprites.other }}</pre>
    <div class="reference-breakpoint"></div>

    <p>Scroll down for more intriguing 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with loading CSS and JavaScript following a GET request

I initially used express and the render function to display different pages on my website. However, I've now decided to switch to vanilla JavaScript instead. The objective is to load the HTML file along with all the necessary JS and CSS files. Below i ...

javascripthtmlcssnode.jshttp

Retrieve all items pertaining to a specific week in the calendar

I'm trying to obtain a list of week ranges for all data in my MongoDB. When a week range is clicked, only the records for that specific week range should be displayed. By clicking on the week range, the ID of the week (let's say 42, representing ...

javascriptmongodbmongoose

What are the potential drawbacks of importing a namespace and a child module together? For example, using `import React, { Component } from ...`

Collaborating with some colleagues on a React project, I began by importing React and constructing my class like this: import React from 'react' Class MyComponent extends React.Component But then they suggested that I also import Component sep ...

javascriptreactjsecmascript-6es6-modules

Analyzing latency in node.js through numerous requests

Is there a way to send multiple requests in a loop, and measure the time of each request? In PHP I'd do: require 'vendor/autoload.php'; use GuzzleHttp\Client; $client = new Client(); for ($i = 0; $i < 100; $i++) { $start = mic ...

javascriptnode.jsrequest

Employing a while loop within the context of a Promise

I am currently working on a user list and checking users with specific details. I'm utilizing sequelize js with express for this task. My query is whether it is possible to use a while loop in this manner to search and save data in the database. Any a ...

javascriptexpresspromisesequelize.js

Ways to display scroll bar when hovering the mouse pointer?

When visiting the website YouTube, you may notice that their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been attempting to achieve this effect on my own div, but currently, the scrollbar only appears once I start scrol ...

javascriptcss

What is the best way to integrate LESS css into a Reactjs application?

I am looking to incorporate LESS into my React app, but I have been unsuccessful in finding a solution through Google. As a newcomer to ReactJs, I lack deep knowledge and would greatly appreciate guidance on installing Less. If anyone is able to help me ...

javascripthtmlcssreactjsless

Manipulating a global variable in VueJS

Currently, I am referring to Global data with VueJs 2 for my project, focusing on only one variable. In the code provided, I have included an @click event to update the variable. However, it throws an error stating "Uncaught ReferenceError: $myGlobalStuff ...

javascriptvue.jsvuejs2

Ways to determine if a website is being accessed from a mobile device or a computer without relying on TeraWurfl technology

After my search on the internet yielded no answers, I decided to post my question here. Is there a method available to detect whether a site is being accessed from a computer or mobile device without using TeraWurfl? I'm looking for a simple code snip ...

javascriptphpjquery

I am facing hurdles with firebase permissions as it is not granting me the necessary access

firebase.database().ref('meetups').push(meetup) .then((data)=> { console.log(data) commit('createMeetup', meetup) }) .catch((error) => { console.l ...

firebasefirebase-realtime-databasevue.jsfirebase-security

Using Tailwind classes in Vue props

Looking to utilize a Vue prop within a Tailwind CSS class. The class in question is bg-[url('address')] (which sets the background image), with 'address' being the prop. Despite various attempts, I keep encountering the following erro ...

vue.jsvuejs3tailwind-css

"Seamlessly Integrating AngularJS with WebGL for Stunning Canvas Inter

I am new to AngularJS and curious about its compatibility with HTML5 Canvas or WebGL. Are there any tutorials available on how to integrate AngularJS into a view that uses these technologies? I have noticed some games claiming to be developed with Angular ...

javascriptmodel-view-controllercanvasangularjswebgl

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...

javascriptangularangular-materialangular6ace-editor

I'm facing an issue with this error message - DiscordAPIError: Unable to send a message that is empty. How can I

What's the solution to this issue? Error: UnhandledPromiseRejectionWarning: DiscordAPIError: Cannot send an empty message Code: let y = process.openStdin() y.addListener('data', res => { let x = res.toString().trim().split(/ +/g) ...

javascriptdiscord.js

What is the reason for the inconsistency in CORS post requests working for one scenario but not the other?

Currently, I am facing an issue while attempting to add email addresses to a mailchimp account and simultaneously performing other tasks using JavaScript once the email is captured. Here's the snippet of my JavaScript code: function addEmail(){ v ...

javascripthtmlcors

Basic HTML code that displays either one or two columns based on the width of the screen

My monitoring website displays dynamic rrd graphs in png format with fixed dimensions. I am looking to adjust the layout based on browser window size - showing the graphs in 1 column if the width is below a certain threshold, and in 2 columns if it exceed ...

javascripthtmlcss

Tips for extracting nested information from a firebase real-time database

Recently, I created a small website where my family and friends can place their bets on the name, gender, and date of birth of our upcoming baby. To make this happen, I utilized Vue along with Firebase's real-time database. Now, I am looking to develo ...

c#vue.jsfirebase-realtime-databasefire-sharp

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

javascriptjqueryhtml

Having difficulties with the 'client request' function in the latest version of Next.js (13.5.1) - still receiving server-side responses

In the current version of Next.js (13.5.3), I am utilizing 'use client' but the component is still rendering from the server-side. Additionally, I am finding it challenging to integrate Tailwind and Ant Design (antd) together in Next.js. If anyo ...

javascriptnext.jstailwind-cssantdnext.js13

Children components in Vue.js are receiving an undefined props object

Within my application, I am working with a parent and child component. The parent component directly includes the child component, which needs to access data from the parent. This data is fetched from a REST API within the parent component. However, when t ...

javascriptvue.jsparent-childvue-props