Tips for effectively managing a Vue3/Quasar project that involves both dynamic and static image paths

I encounter an issue that seems rather common. Sometimes in my quasar application, I utilize the vite/quasar shortcut for assets like the example below:

<q-carousel-slide :name="2" class="column no-wrap flex-center q-pa-none">
  <q-img src="~assets/imgs/carousel/service-upgrade.jpg" style="height:100%">
    <div class="column no-wrap flex-center" style="width: 100%;height:100%">
      <q-img src="~assets/imgs/carousel/logo-white.png" style="max-width:250px" class="q-mb-lg"></q-img>
      <h1 class="text-h1 text-weight-bolder text-white q-my-none">
        ELECTRICAL UPGRADES
      </h1>
      <h4 class="text-h4 text-weight-light q-mt-xs q-mb-lg text-white">
        NEW WIRING & SERVICE UPGRADES
      </h4>
      <q-btn outline color="white" class="q-my-5 my-btn" label="GET A QUOTE" size="lg" @click="layoutStore.toggleContactUsDrawer"/>
    </div>
  </q-img>
</q-carousel-slide>

However, there are instances where it is more convenient to use an array to shorten my code with a v-for loop like the following:

        <q-tab-panel name="lighting">
          <div class="row q-pa-md block-wrapper text-center q-col-gutter-md" style="margin-bottom:100px;">
            <div v-for="item in imagesArray[0]['lighting']" :key="item.id" class="col-sm-4 col-xs-6">
              <q-img loading="eager" :src="getImageUrl(item.link)" class="rounded-borders text-right" :ratio="16/9" @click="openFullScreenImage(getImageUrl(item.link))"/>
            </div>
          </div>
        </q-tab-panel>

Here is the script with relative paths for the code above:

  const imagesArray = [{
panels:[
    { id: 1, link: '../assets/imgs/recentwork/panels/panel 1.jpg'},
    { id: 2, link: '../assets/imgs/recentwork/panels/panel 2.jpg'},
    { id: 3, link: '../assets/imgs/recentwork/panels/panel 3.jpg'},
    { id: 4, link: '../assets/imgs/recentwork/panels/panel 4.jpg'},
    { id: 5, link: '../assets/imgs/recentwork/panels/panel 5.jpg'},
    { id: 6, link: '../assets/imgs/recentwork/panels/panel 6.jpg'},
    { id: 7, link: '../assets/imgs/recentwork/panels/panel 7.jpg'},],
lighting: [
    { id: 1, link: '../assets/imgs/recentwork/lighting/lighting 13.jpg'},
    { id: 2, link: '../assets/imgs/recentwork/lighting/lighting 22.jpg'},
    { id: 3, link: '../assets/imgs/recentwork/lighting/lighting 26.jpg'},
    { id: 4, link: '../assets/imgs/recentwork/lighting/lighting 24.jpg'},
    { id: 5, link: '../assets/imgs/recentwork/lighting/lighting 28.jpg'},
    { id: 6, link: '../assets/imgs/recentwork/lighting/lighting 17.jpg'},
    { id: 7, link: '../assets/imgs/recentwork/lighting/lighting 27.jpg'},
    { id: 8, link: '../assets/imgs/recentwork/lighting/lighting 30.jpg'},
    { id: 9, link: '../assets/imgs/recentwork/lighting/lighting 12.jpg'},
],    
commercial: [
    { id: 1, link: '../assets/imgs/recentwork/commercial/commercial 1.jpg'},
    { id: 2, link: '../assets/imgs/recentwork/commercial/commercial 2.jpg'},
    { id: 3, link: '../assets/imgs/recentwork/commercial/commercial 3.jpg'},
    { id: 4, link: '../assets/imgs/recentwork/commercial/commercial 4.jpg'},
    { id: 5, link: '../assets/imgs/recentwork/commercial/commercial 5.jpg'},
    { id: 6, link: '../assets/imgs/recentwork/commercial/commercial 6.jpg'},
    { id: 7, link: '../assets/imgs/recentwork/commercial/commercial 7.jpg'},
    { id: 8, link: '../assets/imgs/recentwork/commercial/commercial 8.jpg'},
    { id: 9, link: '../assets/imgs/recentwork/commercial/commercial 9.jpg'},
],

However, maintaining two sets of image folders, one in the src folder and another in the public/assets/imgs folder, becomes a tedious task. It is cumbersome to keep copying the images back and forth, and it becomes even more challenging to update them separately.

Is there a way to utilize the src assets img folder exclusively instead of relying on the public folder, which is quite cumbersome to manage?

javascriptvuejs3relative-pathquasar-frameworkquasar

Answer №1

To incorporate non-public assets, you can use Vite and import them by utilizing new URL(url, import.meta.url). Simply adjust your array as follows:

panels:[
    { id: 1, link: new URL('../assets/imgs/recentwork/panels/panel 1.jpg', import.meta.url).href },
    { id: 2, link: new URL('../assets/imgs/recentwork/panels/panel 2.jpg', import.meta.url).href },
    { id: 3, link: new URL('../assets/imgs/recentwork/panels/panel 3.jpg', import.meta.url).href },
    ...

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

Cloud Firestore query error in Firebase Cloud Function despite data being present in Cloud Firestore

I'm facing an issue with my cloud function. The function is designed to query data from a Cloud Firestore collection, which exists. However, when I call the function from my iOS app, it always goes to the else statement and prints "NOT IN COLLECTION." ...

javascriptnode.jsswiftgoogle-cloud-firestoregoogle-cloud-functions

What steps should I take to ensure my .js.erb files are compatible with Rails 7?

I have been following a Rails Tutorial on Building a Link Shortener with Rails 6 and Ruby 2.xx to create an app. However, I am using Rails 7.0.4 and Ruby 3.0.0. I encountered an issue with my create.js.erb file not functioning properly. After some research ...

javascriptruby-on-rails-7stimulusjsturbo-rails

React App stalled due to continuously running function

In this section of my React app, the createBubbles function is functioning properly. However, I am encountering an issue where the entire app freezes when navigating to another page after visiting this one. The console displays the following errors and de ...

javascriptnode.jsreactjsdom-events

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

Difficulty arises when attempting to create JSON using the Array.push() function from the data received via Ajax. The generated JSON is not successfully populating the tbody element

I am facing an issue while populating my tbody with data using the code below: function adaptSelectedBanks(banks) { console.log(banks.length); $(function() { banks.forEach(function (ba) { var c ...

javascriptjqueryhtmlajaxweb

Using a JSP page to trigger a JavaScript function

I am attempting to execute an in-page JavaScript function from within a JSP page. Here is the code snippet, however, the JavaScript functions do not appear to be executing when the JSP page loads on the client side. Is there anything incorrect with the a ...

javascriptfunctionjsp

"The challenge of achieving a transparent background with a PointMaterial texture in ThreeJS

When creating a set of particles with THREE.Points and using a THREE.PointMaterial with texture, I noticed that the transparency of the particles is working only partially. The textures are stroke rectangles created with canvas. Here is what my particles ...

javascriptthree.js

Continuous Playback of Sound

Is there a way to autoplay an audio in loop without being blocked by browsers? Code : <audio id="audio1" src="assest/sound/1.mp3" autoplay="" /> <script> a = document.getElementById('audio1&apo ...

javascriptphphtmljquerycss

Scroll up and down to witness the enchanting interplay of fading in and out

Looking to expand upon the solution given in this response. The existing code effectively fades in an element while scrolling down and fades out an image when scrolling up; however, it lacks the functionality to fade out when scrolling down. I am aiming ...

javascripthtmljquerycss

React component using Highcharts is displaying categories as numeric values instead of text

Incorporating the highcharts-react package (https://github.com/highcharts/highcharts-react) into my Laravel project has presented a unique challenge. I am attempting to fetch data from my reducer and transform it into a string to populate the categories in ...

javascriptreactjshighcharts

employing JavaScript code for targeting classes rather than IDs

I am facing an issue with a javascript function called MyFunc() that is currently only working with id="item_for_MyFunc". Within the function, there is a var elem = document.getElementById("item_for_MyFunc"); and the HTML body contains: <body onload= ...

javascripthtmlclass

Is there a way to seamlessly transition to a new scene or page in my project while still having the option to easily navigate back to the previous

This is just the beginning of a series of scenes that I have in mind. As I move on to scene 2, I realize that my current method of fading to black and loading a new html file is becoming monotonous. I am looking for a more creative approach where the user ...

javascriptthree.js

How can AngularJS apps handle authentication?

Seeking input on user authentication with AngularJS and Zend... I currently have Angular on the client side and Zend on the server side handling authentication successfully. However, I'm looking for best practices and code examples for enhancing the ...

javascriptangularjszend-frameworkauthentication

Confused between Javascript and PHP? Here's what you should consider!

Looking for a solution to transfer a string from JavaScript, obtained from the content of a div, to PHP in order to create a text file with this information. What would be the most effective approach to accomplish this task? Edit[1]: Using the Post ...

phpjavascripttext-files

Is recursion effective in this scenario? (javascript/node.js)

Currently, I am working on creating a TV using a Raspberry Pi and JavaScript to play the same playlist repeatedly. Although playing the files is not an issue, I am facing a challenge with the asynchronous nature of JavaScript. Below is the code that is cau ...

javascriptnode.jsraspberry-piraspbian

Updating the state of Formik

Currently, I'm knee-deep in a React project that requires a slew of calculations. To manage my forms, I've turned to Formik, and for extra utility functions, I've enlisted the help of lodash. Here's a peek at a snippet of my code: impor ...

javascriptreactjstypescriptformikjotai

Guide on updating the form structure with ajax

Lately, I've been working on a contact module with 3 columns: name, email, and phone. There's also a +1 button that adds a new row to input another contact using ajax. However, a problem arises when updating the structure as the data in the old c ...

phpjavascriptjqueryajax

Reactjs, encountering a hitch in utilizing material UI: Incompatible hook call detected

As a newcomer to React, I decided to incorporate Material UI components into my project. After installing the components locally using npm install and importing them into my project, I encountered an error when trying to run start: Error: Invalid hook call ...

javascriptreactjsmaterial-ui

Troubleshoot: Unable to send or receive messages in Socket.IO Chat

I recently tried following a tutorial on socket.io chat, which can be found here. Although the tutorial video showed everything working perfectly, I have encountered issues with my implementation. It seems like the messages are not being sent or received ...

javascriptjqueryhtmlnode.jssocket.io

Is there a way to properly dissect or iterate through this?

I have exhausted all possible methods to retrieve the data, but I am unable to solve this puzzle. The information is organized in a format like the following: [{"code":1000,"day":"Sunny","night":"Clear","icon":113,"languages": [{"lang_name":"Arabic","lan ...

javascriptjsonloopsparsing