Insert a variable into the URL path of a JavaScript file

Struggling to insert a variable in the code snippet below:

eleventyConfig.addPassthroughCopy({ "random-folder/img": "subfolder/img" });

This is what I've attempted:

var directory = "random-folder";
eleventyConfig.addPassthroughCopy({ directory + "/img": "subfolder/img" });

Unfortunately, this approach doesn't seem to be working. Any assistance would be greatly appreciated. The source path is on the left side of the :, and the destination is on the right. For more details on the file structure, refer to this link.

javascriptvariableseleventy

Answer №1

To include a property name in brackets, you can do it this way:

let folderName = "sample-directory";
eleventyConfig.addPassthroughCopy({ [folderName + "/images"]: "subdirectory/images"});

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

Can one intercept the window.location.replace event?

Suppose I am currently browsing the URL "example.com/somepage#somehash" and then decide to execute window.location.hash = "anotherhash", the URL will be updated to "example.com/somepage#anotherhash". This action triggers the window.hashashchange event. On ...

javascripthtmldom-eventshashchange

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

javascriptangular

Struggling with Nuxt 3 Firebase and VueFire: unable to get useCurrentUser to work

Currently, I am attempting to implement VueFire's useCurrentUser() function within a Nuxt 3 application that does not utilize Server Side Rendering. I have properly configured vuefire in my nuxt.config.ts file as outlined in the documentation. export ...

javascriptfirebasefirebase-authenticationnuxt.jsvuefire

Looking for a solution to the problem: Module 'import-local' not found

internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'import-local' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) Encoun ...

javascriptnpmbabeljs

Regular expression for parsing any CSS font properties

Does anyone have a reliable regex to break down a css font string into its individual components? 12px arial italic bold sans-serif 12px/50px verdana etc ...

javascriptregex

Managing API calls through Next.js routing

Here is a next.js handler function for handling api requests on our server. I am looking for assistance on how to access a variable between request methods. Any help would be greatly appreciated. export default function handler(req, res) { if(req.met ...

javascriptapinext.js

Incorporating a JavaScript code into my SharePoint master page to automatically deselect a checkbox resulted in updating the page title

I've integrated the following JavaScript code into my SharePoint master page: <script type="text/javascript> function DefaultUploadOverwriteOff() { if (document.title== "Upload a document") { var input=document.querySelectorAll("input"); ...

javascriptjquerysharepoint

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

javascripthtmlxml-namespaces

Issue in Wordpress: ReferenceError - '$' is not defined

Currently utilizing WordPress and attempting to access the following code snippet. I am encountering an error on the last line }(jQuery)); (function($) { $(function () { // Slideshow 3 $("#slider3").responsiveSlides({ auto: true, pag ...

javascriptjquerywordpress

Issue with VueJs and ChartJs not displaying custom options when making an API call

Having trouble populating my chart with data from the API. Despite setting extraOptions for my chart, it defaults to default options when rendered. Here is the component code: import { Bar, mixins } from 'vue-chartjs'; export default { name: ...

javascriptvue.jschart.jsvue-chartjs

Iterate through a large JavaScript object using setTimeout

What is the most efficient way to iterate through large object elements without freezing the browser? I have successfully looped through arrays using setTimeout/setInterval in this manner: var i = 0; var l = arr.length; var interval = window.setInterval( ...

javascriptarraysloopsobject

Replace the JS function in the bundle with a new custom function

I have compiled my AngularJS website using webpack. While in the Chrome console, I am trying to override a function within the controller of a particular directive. Is this achievable? ...

javascriptangularjswebpack

implementing automatic ajax requests when user scrolls

This is a piece of JavaScript code: $(window).scroll(function() { $.ajax({ type: "GET", url: "not_data.php", data: dataString, success: function my_func () { //show new name ...

javascriptphpjqueryajax

Firefox does not support event.dataTransfer.files for drag and drop operations

Currently, I am implementing drag and drop functionality into one of my projects and encountering an issue specifically with Firefox. The code I am using for testing purposes is as follows: document.getElementById("folder_files").addEventListener("drop", ...

javascripthtml

Calculating remaining change with the modulus operator in JavaScript

I have a task where I need to convert any given number of pennies into the correct amount of Quarters, Dimes, Nickels, and leftover pennies. My program currently uses Math.floor() to calculate the total value of each respective coin type when executed in ...

javascripthtmlmodulus

Top Margin: Supported by Chrome and Safari

After troubleshooting why the margin-top is not working on Safari, but works fine on Chrome, I discovered a discrepancy. Chrome Upon hovering over an item in the image, the cursor changes as expected. This feature operates smoothly in Chrome. https://i. ...

javascriptphphtmlcss

An error was thrown at line 474 in module.js

After recently installing nodejs on my laptop, I'm struggling to run a js file in the node environment. I attempted using this command: node C:\Program Files\nodejs\file.js, but encountered the following error: module.js:474 thr ...

javascriptnode.js

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

javascriptjqueryhtml

Ways to access an array's value using a variable in jade

Having trouble understanding why a variable cannot be used to call a value in an array using JS/Jade. This issue arises within a script on a .jade file. The array contains around 400 entries, and one of them is shown below: myFood[10]['Cake'] = ...

javascriptarraysnode.jspug

Utilizing the split function within an ngIf statement in Angular

<div *ngIf="store[obj?.FundCode + obj?.PayWith].status == 'fail'">test</div> The method above is being utilized to combine two strings in order to map an array. It functions correctly, however, when attempting to incorporate the spli ...

javascriptangulartypescript