Utilizing a font URL imported through a script

I am currently working on incorporating the pdfmake package into my application. In order to load fonts, a list of URLs is required during initialization. However, the fonts I am using are managed by npm and Vite, so they do not have fixed URLs. Here's the progress I've made so far:

npm install @fontsource/source-sans-pro

In my app.js file:

import pdfMake from "pdfmake/build/pdfmake";
import "@fontsource/source-sans-pro/latin-400.css"
import "@fontsource/source-sans-pro/latin-400-italic.css"
import "@fontsource/source-sans-pro/latin-700.css"
import "@fontsource/source-sans-pro/latin-700-italic.css"

pdfMake.fonts = {
    SourceSans: {
        normal: "", // need to provide URLs for the WOFF files
        bold: "",
        italics: "",
        bolditalics: ""
    },
};

After running npm run build, the following output is generated:

✓ 636 modules transformed.
public/build/manifest.json                                               6.12 kB
public/build/assets/source-sans-pro-latin-400-italic-500f8aaf.woff2     14.16 kB
public/build/assets/source-sans-pro-latin-700-italic-fae9ee8d.woff2     14.20 kB
public/build/assets/source-sans-pro-latin-700-normal-0d0a6262.woff2     14.71 kB
public/build/assets/source-sans-pro-latin-400-normal-7b348b30.woff2     14.89 kB
public/build/assets/source-sans-pro-latin-700-italic-1933b21f.woff      17.68 kB
public/build/assets/source-sans-pro-latin-400-italic-c3707996.woff      17.76 kB
public/build/assets/source-sans-pro-latin-700-normal-bcc2a2ed.woff      18.39 kB
public/build/assets/source-sans-pro-latin-400-normal-69491b82.woff      18.42 kB

As you can see, the fonts are accessible at URLs like 

https://example.com/build/assets/source-sans-pro-latin-400-normal-69491b82.woff
, but this is a dynamic URL. How can I retrieve that URL for use in my script?

javascriptlaravelvite

Answer №1

If you want to retrieve the URL of your assets, simply use import.meta.url. Vite is smart enough to handle any necessary transformations so that the URLs remain accurate even after bundling and asset hashing:

const imageUrl = new URL("IMAGE_PATH", import.meta.url).href;

For further information, refer to the official documentation.

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

Tips for incorporating an outside model into vue.js with babylon js

Struggling with importing a gltf file into vue.js using babylon.js to create a 3D view on a webpage. The documentation online isn't very clear, and I've tried the following steps in my Hello.vue file: <div> <h1> Hello </h1> < ...

javascriptvue.jsgltfbabylonjs

Removing Multiple Object Properties in React: A Step-by-Step Guide

Is there a way in React to remove multiple object properties with just one line of code? I am familiar with the delete command: delete obj.property, but I have multiple object properties that need to be deleted and it would be more convenient to do this i ...

javascriptreactjstypescript

Modifying attributes of an object within a document using Mongoose

Encountering an issue where the sentiment object in my document is not updating. Within my Model Class, there's a field named sentiment of type Object structured like this: sentiment: { terrible: 0, bad: 0, okay: 0, good: 0, fantastic: 0 } ...

javascriptnode.jsexpressmongoose

Running a script within an Ajax-rendered form using remote functionality in a Ruby on Rails

After clicking the following button, my form is rendered: = link_to 'New Note', new_note_path, :class => "btn btn-primary new-note-button", :type => "button", :id => "new-link", remote: true The form is rendered using the script below ...

javascriptjqueryruby-on-railsajax

How can I show information on the same page as a link by simply clicking on it?

My goal is to create a functionality where clicking on a link will display specific information. Currently, all the links and their corresponding information are displayed at once. I want to change this so that the links are displayed first, and the inform ...

javascriptjqueryhtml

What is the best way to send a string from an HTML form, route it through a router, and create and save an object?

Currently, I am facing an issue while attempting to transfer a string from the frontend to the backend. The technologies I am using include Node, Express, Body Parser, EJS, and PostgreSQL. Here is the basic structure of my file system: – app |– api ...

javascriptnode.jsexpressinputbody-parser

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Currently, I am integrating Twitter digits for authentication purposes. To implement this feature, a small .js script needs to be downloaded and initialized. The recommended approach is to directly fetch the file from the Twitter server. In order to succe ...

javascriptangularwebpacktwitter-fabrictwitter-digits

What is the best way to incorporate a for loop in order to create animations with anime.js?

I am currently working on implementing a for loop to create a page loader using JQuery along with the animation framework anime.js var testimonialElements = $(".loader-animation"); for(var i=0; i < Elements.length; i++){ var element = ...

javascriptjqueryanime.js

Trigger the click event on the ul element instead of the li element using jQuery

Is there a way to make the click event only affect ul tags and not all li elements using jQuery? <!-- HTML --> <ul class="wrap"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> I attemp ...

javascriptjqueryhtml

The sorting feature is not performing as anticipated

I'm dealing with an array of objects fetched from the backend. When mapping and sorting the data in ascending and descending order upon clicking a button, I encountered some issues with the onSort function. The problem lies in the handling of uppercas ...

javascripttypescript

Unable to Retrieve Stripe Connect Account Balance

I've been attempting to retrieve the balance for my connected accounts in Stripe, but every time I make an API call, it keeps returning the platform's account balance instead of the connected account balance. This is happening while in test mode. ...

javascriptnode.jsstripe-payments

`Obtaining information from database tables in Laravel by querying objects``

I've been grappling with retrieving object data using Laravel, specifically by fetching a list based on a database table column (using Models). My database table is structured as follows: id | user_id | news_id | information I am attempting to retr ...

phplaravel

Utilizing auto-generated Nonce for Content Security Policy in a Node.js/Express web application

I've exhausted all possible solutions in my attempt to create a nonce and pass it successfully to the CSP and inline scripts with the nonce variable. Despite reading numerous articles, the guidance on accomplishing this task remains vague. Fortunately ...

javascriptnode.jsexpresscontent-security-policy

Redirecting in Next.js from an API route

I am in the process of developing a backend application that necessitates user authentication. Within this project, I'm utilizing 2 external APIs: API A: responsible for managing user accounts and sessions API B: utilized for executing CRUD operation ...

javascriptaxiosnext.js

Having trouble getting @vercel/ncc to work, keeps throwing a "Module not found" error

Recently, I have been attempting to follow a tutorial on creating custom GitHub actions using JavaScript from here. The tutorial suggests using the @vercel/ncc package to compile code into a single file if you prefer not to check in your node_modules folde ...

javascriptnpm

Vue.js numerical input module

My approach involves utilizing Numeral.js: Vue.filter('formatNumber', function (value) { return numeral(value).format('0,0.[000]') }) Vue.component('input-number', { templa ...

javascriptvue.jsnumeral.js

What is the process of sending a post request using axios to insert data into a database in React

I am currently working on a login system using mysql, axios, express, and react. The database connections are functioning properly, but I am encountering errors specifically with these two posts, displaying messages like "ERR_CONNECTION_REFUSED" and UNCAUG ...

javascriptmysqlreactjsaxios

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Greetings! I am currently working on my first website design using JQuery. My project includes a dropdown login box created with Twitter-Bootstrap. Unfortunately, I'm facing some challenges with the JQuery script that controls the behavior of the logi ...

javascriptjqueryhtmltwitter-bootstrap

Struggling to bring in { useActionState } from 'react' while trying to follow the latest next.js tutorial with next.js v15.0.0-canary.28, react v19.0.0-rc, and types/react v18.2.21

Currently, I am following the tutorial on next.js available at https://nextjs.org/learn/dashboard-app I have reached chapter 14, which focuses on enhancing accessibility, located at https://nextjs.org/learn/dashboard-app/improving-accessibility During on ...

javascriptreactjstypescriptnext.js

Incorporate the casper function within the casper.evaluate() method

Is it possible to use the casper function inside casper.evaluate() with jQuery code? I need to iterate through elements in a way similar to how jQuery does. I have loaded the jquery.js library. Here is the script I have tried: casper.evaluate(function() ...

javascriptjqueryphantomjscasperjs