Problem with Vue JS Hooper Image Slider (integrated into NuxtJS application)

Issue with Loading Images

I encountered a problem while using the carousel feature in this GitHub project (). The images in the carousel do not display on the first load; instead, a loader animation image appears. However, upon refreshing the page, the carousel works fine without any issues.

Screenshots:

Imported Components:

import {Hooper, Slide, Navigation as SliderNavigation} from 'hooper';

Code snippet from Vue file:

<hooper
    :transition="1000"
    :wheelControl="false"
    :infiniteScroll="true"
    :centerMode="true"
    :hoverPause="true"
    :autoPlay="true"
    :playSpeed="4000"
    :style="variable.HOME_PAGE_SLIDER_LOADED?'height: inherit':'height: 200px'">
    <slide v-for="slider,key in home.index.sliders" :key="key">
      <a :href="typeof slider.link != 'undefined' ? slider.link : ''">
        <img :src="asset(slider.full_size_directory)" height="100%" width="100%">
      </a>
    </slide>
    <SliderNavigation slot="hooper-addons"></SliderNavigation>
  </hooper>

Desktop Details: OS: [Ubuntu 19.02], Browsers: [Chrome, Safari, Firefox]

Smartphone Details: Device: [Samsung], Browser: [Chrome]

javascriptvue.jsnuxt.js

Answer №1

While it may be 8 months after the original post, I still think my solution could benefit someone here. In my situation, the issue stemmed from the img URL being dynamic. I was able to resolve it by using the "require" method:

:src="require(`~/assets/images/${img}`)".

It's important to check for any errors in the console and, if you're in production mode, verify the base URL of the project as well.

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

What are some ways to create a div section within a Google Map interface?

Is there a way to create a div area within the Google map iframe? Some of my code is already prepared here (). The image in this link () illustrates exactly what I'm trying to achieve. ...

javascripthtmlcss

Properties around the globe with Express & Handlebars

Currently, I am utilizing Handlebars (specifically express3-handlebars) for templates and Passport for authentication in my NodeJS application. Everything is functioning smoothly, but I have been contemplating if there is a method to globally pass the req. ...

javascriptnode.jsexpresshandlebars.js

In search of a fresh and modern Facebook node template

I've been on the hunt across the internet for a quality node.js Facebook template, but all I seem to stumble upon is this https://github.com/heroku/facebook-template-nodejs. It's okay, but it's built using express 2.4.6 and node 0.6.x. I wan ...

javascriptfacebooknode.jsexpress

Proper method for extracting and sending the final row of information from Google Sheets

The script I have is successfully formatting and sending out the information, but there is an issue. Instead of sending only the latest data, it is sending out each row as a separate email. I specifically want only the last row of data to be sent. functio ...

javascriptformsgoogle-sheetsrow

Obtaining the NativeElement of a component in Angular 7 Jasmine unit tests

Within the HTML of my main component, there is a my-grid component present. Main.component.html: <my-grid id="myDataGrid" [config]="gridOptions" </my-grid> In main.component.specs.ts, how can I access the NativeElement of my-grid? Cu ...

javascriptangularjasminekarma-jasmine

Utilizing asynchronous operations in MongoDB with the help of Express

Creating a mobile application utilizing MongoDB and express.js with the Node.js MongoDB driver (opting for this driver over Mongoose for enhanced performance). I am aiming to incorporate asynchronous functions as a more sophisticated solution for handling ...

javascriptnode.jsmongodbexpressasync-await

`Cannot Get jQuery ScrollTop Function to Work for 2nd Element`

Having trouble with an issue. Let me explain. I implemented a scrollTop Jquery on page load that scrolls down after a delay to prompt user action. However, I'm facing a problem where another scrollTop doesn't work after clicking buttons "#b3,#b3 ...

javascriptjqueryhtmlcss

Bypass ESLint rule when using Uglify in the Vue build script like a pro!

Every time I try to execute npm run build, I encounter a consistent punc error in various lines. The issue seems to be related to the method in which I am defining functions within my components: <script> export default { data() {} } </scrip ...

vue.jsvuejs2vue-componenteslintuglifyjs

Learn how to apply inline styles to multiple objects within a single element using React

In my project using React, I am attempting to apply styles only to a specific element within another element. Here is an example with an h1 tag: const Header = () => { const firstName = "Ashraf"; const lastName = "Fathi"; const date = new Date() ...

javascriptcssnode.jsreactjsecmascript-6

Slideshow of table rows in HTML

On a webpage, I am populating an HTML table with a random number of rows ranging from 1 to 100. Regardless of the total number of rows, the requirement is to display only 10 rows at a time on the screen and then shift to the next set of 10 rows every 5 sec ...

javascriptjqueryhtml-table

Artboard: Easily navigate through pictures

As part of a school assignment, I wanted to create an interactive story where users can click through images using the UP and DOWN buttons. However, I am facing an issue with my If function overriding the previous function. I envision this project to be a ...

javascripthtmlimagecanvaskeyevent

Cypress eliminating the "X-CSRFToken" header

There seems to be an issue with the Cypress test runner where it is removing X-CSRFToken from the request header, leading to a 403 Forbidden error. I have compared the headers between a manual run and a Cypress test run, and you can see the difference in t ...

javascripttypescripttestingcypresscsrf-token

The performance of HTTP requests is significantly decreased in Internet Explorer compared to expected speeds

I am currently developing an Angular site where I need to send a significant amount of data (approximately 1 MB) in an API call. In the Chrome and Firefox browsers, everything works smoothly and quickly, with a response time under one second. However, whe ...

javascriptangularjshttpinternet-explorer

animations are not triggering when using ng-click inside ng-repeat, is there a reason why the event is not firing?

Check out the code in jsFiddler here After reviewing the code, it's clear that when the add button is clicked, a new item is pushed to the $scope.p. Each item in the ng-repeat loop has an event-binding and everything functions correctly. However, onc ...

javascriptangularjsangularjs-animation

Server-side rendering or updating of React elements

One issue I am facing in my React app is that while all components can update themselves through the browser, a specific module called jenkins-api only functions when called server side. To retrieve the data and pass it into my template, I have utilized th ...

javascriptnode.jsexpressreactjs

What is the best way to iterate through JSON objects stored in a single location?

Currently, I am dealing with a single JSON object structured as follows: Object --> text --> body --> div Array[20] --> 0 Object --> text --> body --> div Array[20] --> 1 Object --> text --> body --> div Array[20] --> . ...

javascripthtmljsonfilefor-loop

Click on the button without any reaction

I'm having trouble with the button. When I click on the button with ng-click="goSearchTitle()", nothing happens. Any idea why it's not working? <body ng-app="myapp"> <div ng-contoller="searchbyTitle"> <h3>Sea ...

javascriptangularjs

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

javascriptjqueryhtmlcssdom

In Vue, while templates cannot be assigned keys and cannot be replaced with a div element, it is important to utilize the v-for directive without a wrapper div element, especially when dealing with nested v-for loops

My JSON data looks like this: { "data":{ "1":{ "color":"red", "size":"big" }, "2":{ "color":"red", "size":"big" }, "3":{ "color":"red", "size":"big" }, "4": ...

javascriptvue.jsvuejs2vue-component

Using JavaScript to organize and reformat JSON data into grouped structures

In my dataset, I am unable to make any formatting adjustments or modifications. //input json data [ { "Breaks":[ {"points":12,"points_total":12,"average":8.0,"faults":[]}, {"points":17,"points_total":29,"average ...

javascriptarraysjson