A guide on embedding static content in the index.html page

Question

A guide on embedding static content in the index.html page

During my project, I utilized vue-cli with webpack and encountered an issue when trying to load an image in index.html. Here is how it was done initially:

<html>
    ...
    <style>
        .tag1 { background-image: url('<%= require('@/assets/icons/a123.svg') %>'); }
    </style>
    ...
</html>

Now, I am transitioning to Vite and need to figure out how to load the icon in index.html using this new build tool. I attempted url(/assets/icons/a123.svg), but unfortunately, it resulted in a 404 error.

javascript vue.js vite

Answer 1

Answer №1

Transfer the SVG file to the /public directory, then you will be able to reach it using

<img src="/a123.svg" />

Answer 2

Transfer the SVG file to the /public directory, then you will be able to reach it using

<img src="/a123.svg" />

Answer 3

Answer №2

To easily manage assets in your project, consider utilizing a function, refer to the Vite documentation

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

Next, establish a global property in your main.js file:

app.config.globalProperties.$image = useImage;

You can then easily utilize this by calling:

$image(imageUrl)

Answer 4

To easily manage assets in your project, consider utilizing a function, refer to the Vite documentation

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

Next, establish a global property in your main.js file:

app.config.globalProperties.$image = useImage;

You can then easily utilize this by calling:

$image(imageUrl)

A guide on embedding static content in the index.html page

Answer №1

Answer №2

Similar questions

The ng-repeat directive fails to acknowledge changes in the model

Modifying the geometry of a three.js object

Is there a way to host a Vue app bundled with webpack in Django without having to recompile for every update?

Finding the actual path in any scenario using JavaScript ($.ajax)

What is the best way to trigger the Javascript blur event following a click event that results in the element losing focus

What steps should be taken to ensure input validation in jquery SmartWizard when loading content via ajax requests?

Transferring data and parameters between the Client-Side and Server-Side

How can I expand my Jquery slideshow to occupy the entire screen?

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

What is the functionality of ngCloak?

What method can I use to locate the double quote option within an HTML select element using jQuery?

The sendKeys() method in Protractor is failing due to the element being hidden/not

Repeatedly animate elements using jQuery loops

Issue: app.database function is not recognized with Firebase

Combining two observables into one and returning it may cause Angular guards to malfunction

JavaScript code for the submit button to proceed or halt the form submission

Utilize Create React App and Leaflet Maps to showcase individual user profiles alongside detailed location maps

Unable to install local dependency using npm

The processing-js library threw a Reference Error indicating that the Navigator could not be found

Guide on verifying the status of a switch toggle using Selenium and C#