What is the best way to allow JavaScript to access a Laravel asset?

Currently, I am working on creating a slideshow and have implemented a navbar.js file with the following code:

  images[0] = "{{ asset('cover/deanna-j-3GZlhROZIQg-unsplash.jpg')}}";
  images[1] = "{{ asset('cover/kevin-laminto-iRZQjV--Z_4-unsplash.jpg')}}";
  images[2] = "{{ asset('cover/pexels-andrew-neel-2123337.jpg')}}";
  images[3] = "{{ asset('cover/pexels-leah-kelley-952588.jpg')}}";
  images[4] = "{{ asset('cover/pexels-pixabay-460736.jpg')}}";
  images[5] = "{{ asset('cover/pexels-tiff-ng-2711718.jpg')}}";

While the frontend of the website shows the slideshow functioning correctly, there is an issue where JavaScript does not interpret the 'asset' function resulting in incomplete image URLs such as: , hence the images not displaying.

I am looking for a solution to enable JavaScript to read the Laravel asset within the JavaScript file. Any suggestions?

javascriptlaravel

Answer №1

It's possible to generate a window object for the asset URL.

Inside the primary layout.blade.php file:

<script>
    window.asset = "{{ asset('/') }}";
</script>

Subsequently, within navbar.js:

You can access the asset:

let images = [];
 
images[0] = window.asset+"cover/deanna-j-3GZlhROZIQg-unsplash.jpg";
images[1] = window.asset+"cover/kevin-laminto-iRZQjV--Z_4-unsplash.jpg";
images[2] = window.asset+"cover/pexels-andrew-neel-2123337.jpg";
images[3] = window.asset+"cover/pexels-leah-kelley-952588.jpg";
images[4] = window.asset+"cover/pexels-pixabay-460736.jpg";
images[5] = window.asset+"cover/pexels-tiff-ng-2711718.jpg";

Answer №2

images[1] = 'cover/kevin-laminto-iRZQjV--Z_4-unsplash.jpg';
images[2] = 'cover/pexels-andrew-neel-2123337.jpg';
images[3] = 'cover/pexels-leah-kelley-952588.jpg';
images[4] = 'cover/pexels-pixabay-460736.jpg';
images[5] = 'cover/pexels-tiff-ng-2711718.jpg';

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

Adjusting the text of a button when hovering over it will also trigger a resizing of the

Currently, I am facing an issue where the bootstrap button's size changes when hovered over. My intention is to have the bootstrap button remain a fixed size while only the text inside it changes using javascript for mouseover and mouseout events. How ...

javascriptjqueryhtmlcsstwitter-bootstrap

The function has exceeded the time limit of 60000 milliseconds. Please make sure that the callback is completed

Exploring the capabilities of Cucumber with Protractor has been an intriguing journey for me. As I delved into creating a feature in Gherkin language, outlining the steps and scenarios necessary for my end-to-end tests, a new world of possibilities opened ...

javascripthtmlangularcucumber

Sending a jsp page for review at specified intervals

Using the setTimeout method, I attempted to achieve this. I passed a variable containing time as an argument, but the setTimeout method is only taking the initialized value of that variable and not the updated value fetched from the database. Below is the ...

javajavascriptjspservlets

Create artwork by drawing and adding text to an image before saving it

I am looking to enhance my website by adding a feature that allows users to draw on images hosted on the server. Additionally, I want users to have the ability to add text to the image and save their edits as a new picture. While it may seem like a simple ...

javascriptimagecanvasdrawing

Sequentially iterate through elements based on their Data attributes

Assume you are working with HTML elements like the ones shown below <span class="active" data-id="3"> Test 3 </span> <span class="active" data-id="1"> Test 1 </span> <span class="activ ...

javascripthtmljquery

Formatting dates for the bootstrap datepicker

Hi there! I am currently using a bootstrap datepicker and I am attempting to retrieve the value from the datepicker text box in the format of date-month-year for my controller. However, at the moment, I am only able to obtain values in the format Tue Oct 0 ...

javascripttwitter-bootstrapdatepicker

Implement a loader in AngularJS to display when transitioning between pages

Is there a way to implement a loader that appears when the page starts changing and only disappears once the entire page is fully rendered to prevent clipping bugs? I have already set up the loader as shown below: $scope.$on('$routeChangeStart' ...

javascriptangularjsloading

Having Trouble Styling Radio Buttons with CSS

Hello, I'm facing an issue with hiding the radio button and replacing it with an image. I was successful in doing this for one set of radio buttons, but the second set in another row is not working properly. Additionally, when a radio button from the ...

javascriptjqueryhtmlcss

Issue: Incomplete data retrieval using JS/React fetchDescription: I am facing

I am currently working on an app centered around the card game Magic. The concept involves pasting a list of cards into a textbox and then clicking a button to display corresponding card images. My approach entails using fetch requests to interact with an ...

javascriptreactjspromisefetch

Retrieving all options from a dropdown list in HTML using ASP.net C#

I am currently working with a select list that looks like this: <select name="Section" id="Section" size="5"> <option>Section1</option> <option>Section2</option> <option>Section3</option> <option>Section4< ...

c#javascripthtmlasp.netlist

Looping through and printing JSON strings

Currently, I am dealing with a JSON string of this specific format: {"prey":["{\"distance\": 8.686924173343307, \"signal\": \"-59\", \"frequency\": 2447, \"mac\": \"00:00:00:00:00:00\", \"ip ...

javascriptjson

Refusing to include two values due to the presence of a comma in JavaScript

I'm trying to add two values with commas and .00 (Example: 1,200.23 + 2,500.44) but it's not working because the textbox includes commas as required by my system. The result shows NaN because the comma is considered a special character. It was w ...

javascriptphpcsshtmlcodeigniter

Exploring the Dynamic Routing Features of Next.js

After diving into Next.js, I found the learning curve to be manageable since React was already familiar territory for me. Currently, my focus is on implementing dynamic routing in my application - Starting with my live/index.js file - (Where I utilize ge ...

javascriptnext.jsdynamic-routing

Access the system by logging in with a stored Google account

I have experience integrating "Login via Google account" on various websites. However, some sites like Zomato always display the option to login via Google as soon as you open them. They even show a list of Google accounts that I have previously logged i ...

javascriptjquerycodeignitergoogle-signin

Unable to view cross domain cookies within the browser's development tools

I am currently working on a web application that has an Angular front end running on http://localhost:4200 and a NodeJs backend running on http://localhost:3000. When a user successfully logs in, a cookie is set from the backend containing a token. However ...

javascriptnode.jsangularauthenticationcookies

Attempting to retrieve the name of my controller and action within a JavaScript file

After checking out the Stack Overflow link here, I came across a suggested solution: var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()'; However, despite implementing this code in my JavaScript file, it does not yield ...

javascriptcontroller

Is there a way to retrieve the original JSON string from a GWT JavaScriptObject?

Working with JSONP in my GWT application has presented some challenges. When the server sends a json string, I am able to retrieve it in the form of a JavaScriptObject on the client side. The issue arises when my json data contains complex structures, usi ...

javascriptjsongwtjsonp

Date selection tool in Bootstrap showing blank field

I am currently working on implementing a bootstrap datepicker to update layer dates on my website. However, I am facing an issue where the calendar dropdown does not appear when I click on the datepicker box and instead it just shows an empty box. My goal ...

javascriptbootstrap-4leafletpugbootstrap-datepicker

Reorganizing objects upon insertion in Mongo DB

I am encountering an issue in my Node.js app where MongoDB is causing objects to be reordered when inserting new records into the database. I am using the following insert method: collection.insert(object, {safe:true}, function(err, result) { if (err) ...

javascriptnode.jsmongodbexpress

Exploring the features of mobile search criteria filtration in jQuery

I have a homepage with various criteria that users can select such as budget maximum and minimum. When they click on the "search" button, I want it to lead them to a list of links on another page that corresponds to their search using jQuery Mobile and ...

javascriptjquery-mobilecordova