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

Eslint highlighting the initial function declaration within a Vue script

I'm currently creating a Vue file using a Typescript script, and encountering an unusual Eslint "error." The issue arises on line 15 with this specific complaint: Parsing error: Unexpected token, expected "," Interestingly, this error only occurs wi ...

typescriptvue.jseslint

Updating and Preserving Content in Angular

I've encountered an issue while working on a code that allows users to edit and save a paragraph on the screen. Currently, the editing functionality is working fine and the save() operation is successful. However, after saving, the edited paragraph do ...

javascripthtmlangulartypescript

Tips for including a footer element in React:How can a footer division be

I need help with implementing a footer in my React web app. Currently, the body section in index.html looks like this: <body> <div id="root"></div> <script src="index.js"></script> </body> Inside index.js, the rend ...

javascripthtmlreactjs

Encountering difficulty selecting a dropdown sub-menu using Selenium WebDriver

I'm currently working on automating a website with selenium webdriver. The issue I'm encountering is that when I try to click on a menu item, the submenu pops up (actually a misplaced dropdown, UI issue), and although I can locate the element of ...

javajavascriptjqueryselenium

Function was expected to call toggleStyle spy, but it did not

Currently, I am implementing Jasmine testing for my project. Below is the function that I am working with: style: string; toggleStyle(style: string, version: string) { this.style = `mapbox://styles/mapbox/${style}-${version}`; } Accompanied by th ...

javascriptangularkarma-jasmineistanbul

Confidently set up a proxy that is recursively nested and strongly typed

I have a collection of objects where I store various content for a user interface. Here is an example: const copy = { header: { content: 'Page Header' }, main: { header: { content: 'Content Subheader' }, body ...

javascripttypescript

A guide on making Rest Requests with VueJs 2 and Symfony 3

Trying to send a PATCH request for an event using VueJs 2, here is the code snippet: // Link and body are defined correctly this.$http.patch(linkUrl, this.baseTerms, {someKey:'any value'}).then(response => { console.log(response.body) ...

phprestsymfonyvue.jsvuejs2

Arrange the row information in the MUI DataGrid in order to prepare it for exporting to CSV or Excel

Is there a way to organize row data for exporting to CSV or Excel with the MUI DataGrid? Take a look at my code snippet for the toolbar. slots={{ noRowsOverlay: NoDataComponent, noResultsOverlay: NoDataComponent, toolbar: ( ...

javascriptreactjsmaterial-uiexportmui-x-data-grid

What are the steps to generate an npm package along with definition files?

Is it possible to create an NPM package with definition files containing only interfaces declared in *.ts files? Consider a scenario where we have two interfaces and one class definition: export interface A { id: number; } export interface B { name: s ...

javascriptnode.jstypescriptnpm

Learn how to utilize the import functionality in Node.js by importing functions from one .js module to another .js module. This process can be seamlessly integrated

Hey there! I'm currently facing a challenge where I need to import a function from one JavaScript file to another. Both files are on the client side in Node.js, so I can't use the require method. If I try to use the import statement, I would need ...

javascriptnode.jsexpressejsnode-modules

The update function in model.findByIdAndUpdate() is failing to make changes

I am struggling to update a user model with new data using findByIdAndUpdate(). Despite my efforts, the model does not reflect the changes made. Below is the code snippet where I am attempting to use findByIdAndUpdate() to add an object: const User = ...

javascriptnode.jsmongodbmongoose

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

After successfully completing the HTML and CSS part, I hit a roadblock with JavaScript. I'm struggling to figure out how to create a button that can toggle the visibility of text when clicked. An error message keeps popping up in the console stating ...

javascripthtmlcssbutton

Pressing the reset button on the search box triggers a JQuery and HTML function

I am new to this, so bear with me. I've simplified my styling for easy pasting here, but the concepts still apply. I have a list of items, a working search field, and functioning filter buttons. What I want is for the filter buttons to reset to &apos ...

javascripthtmljquery

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

javascripthtmlcssbootstrap-modalbootstrap-5

Getting the result from a JavaScript request, whether it's synchronous or asynchronous

This code snippet involves a function that starts with a synchronous comparison test == 0. If the comparison is true, it returns one piece of content; however, if it's not, an asynchronous request is made. The goal here is for the latter part to retur ...

javascriptjqueryajaxasynchronous

When the window is fully loaded, JavaScript executes

Can someone help me set up this script to start running when the page loads? I want the vat field to automatically show up if the company name has been entered. Thank you! //--></script> <script type="text/javascript>//-- $('.colorbox ...

javascriptjquery

jqGrid is failing to display basic JSON data properly

As a newcomer to Jquery and Json, I am struggling with binding a JSON object from a RESTful Webservice written in WCF to jqGrid. Despite saving the JSON object as a static file and attempting to bind it to the grid, I realized that the issue does not lie w ...

javascriptjqueryjsonwcfjqgrid

Is there a way to prevent advertisements from appearing in npm?

As I execute various npm commands, my console gets bombarded with ads promoting different projects and individuals. While I enjoy contributing to open source projects, I believe the console output of a tool should not be used for advertising. Thank you fo ...

javascriptnpm

TreeView Filtering

I have encountered an issue while trying to utilize a treeview filter. Below is the method I have created: var tree = [{ id: "Tree", text: "Tree", children: [ { id: "Leaf_1", text: "Leaf 1", childre ...

javascriptarraysreactjsrecursion

The video element in HTML5 is not showing up on Safari browsers, but it is functioning properly on Chrome

I have set up a video slider on my webpage. You can view the site The code is functioning perfectly on Chrome and iOS Safari, but there seems to be an issue on desktop browsers. When inspecting the page in Safari, the video elements are present in the HTM ...

javascriptcsssafarihtml5-video