An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Question

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Hello and thank you for taking the time to read my query!

I am currently working in a Vue file, specifically in the App.vue where I am importing an external .js file containing icons. Here is how I import the script:

let recaptchaScript2 = document.createElement('script')
recaptchaScript2.setAttribute('src', '../static/js/uikit-icons.min.js')
document.head.appendChild(recaptchaScript2)

Upon loading the page, the script is indeed loaded but unfortunately, the icons do not display on the page. The elements tab shows that it is empty. Interestingly, when I make a small random alteration to the code, Vue seems to "reload" the page (without actually refreshing it) and voila! The icons finally show up!

I initially thought this could be due to the scripts being reloaded for some unknown reason and are therefore processed after everything else. However, even when I tried delaying the execution of the script loading by 500ms using an interval, the icons still failed to appear.

This has left me pondering - what exactly is going on here? What crucial element am I overlooking?

Once again, thank you for delving into my question!

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

After some trial and error, I believe I have found a solution.

My attempt to integrate this code into a Vue file was unsuccessful. Instead, I decided to add it directly to the index.html file.

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="static/js/uikit.min.js"></script>
  <script src="static/js/uikit-icons.min.js"></script>
</body>

Although it may seem like a simple fix, I had previously attempted this method without success. However, after realizing that the scripts might require jQuery, I installed it via npm a few hours ago. This change seems to have resolved the issue, as my icons are now appearing without the need for a refresh. Needless to say, I am pleased with the outcome.

Answer 2

After some trial and error, I believe I have found a solution.

My attempt to integrate this code into a Vue file was unsuccessful. Instead, I decided to add it directly to the index.html file.

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="static/js/uikit.min.js"></script>
  <script src="static/js/uikit-icons.min.js"></script>
</body>

Although it may seem like a simple fix, I had previously attempted this method without success. However, after realizing that the scripts might require jQuery, I installed it via npm a few hours ago. This change seems to have resolved the issue, as my icons are now appearing without the need for a refresh. Needless to say, I am pleased with the outcome.

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Answer №1

Similar questions

Exchange of Fusion Chart

Tips for showing solely the current page number within angular pagination

Sending an array of functions to the onClick event of a button

The Vue3 module does not have any exported members available

Changing color based on AngularJS condition using CSS

Can we retrieve props that have not been explicitly passed down?

Executing Lambda functions on DynamoDB has no effect

Storing props in JSX components using variables in React.jsLearn how to set props in JSX components and

Learn the art of blurring elements upon clicking in Vue

The reducer and the store are experiencing a lack of synchronization

Utilizing Node.js and express to promptly address client requests while proceeding with tasks in the nextTick

Encountering an Issue with NextJS on GAE: EROFS Error indicating a read-only file system

Executing a task within a Grunt operation

What could be causing the JSON String decode error to occur while utilizing extjs ajax?

My goal is to generate four HTML buttons that trigger specific functions: addition, subtraction, multiplication, and division

What is the best way to incorporate a new attribute into an array of JSON objects in React by leveraging function components and referencing another array?

I am experiencing issues with the HTTPClient call not returning accurate JSON data within my Appcelerator Titanium application

Using "array_agg" in a "having clause" with Sequelize

Send multiple input groups using Ajax POST requests

Challenges in Implementing Shadows with Animations in ThreeJS MeshDepthMaterial