This is a snippet of my directory structure:
enter image description here
I have a songs folder under "public" directory containing a bunch of mp3 files.
I want my vue app to play a random song from that file
Everything is kinda settled, except for getting the paths (of the mp3 files) dynamically
For instance, if there are the following files in my public/songs directory - song1.mp3, song2.mp3 and song3.mp3, how do i get the list in vue js - ["song1.mp3", "song2.mp3", "song3.mp3"]?
Thank you
Related
I have the following architecture:
ProjectName
- dist
- img
- index.html
- src
- assets
- fonts
- img
- public
- img
I save static images in ProjectName/src/assets/img/
And save dynamic images (images that user uploaded) in public folder with path ProjectName/public/img from my Flask backend. I'm doing this because I want to get image on the fly without use webpack build
So, I can view images in developer mode use
return require('../../public/img/paintings/'+imgName)
But when I use production mode I must write without first ../
return require('../public/img/paintings/'+imgName)
Because dist folder has shorter path to public folder than non build project
How I come to agreement with different paths and don't change code before build?
I think I found solution for my problem.
I read answer https://stackoverflow.com/a/52083358/10683019 and understood that require using src folder and all works after changed return like in answer
I have a use-case wherein the contents directory besides the markdown and yaml files I have images too. Reason being it is convenient to have a set of related files in a subdirectory. I am aware of displaying images using the assets and static directories.
The Content directory is as shown:
content
- topics
- topic-a
content.yaml
cover.png
- topic-b
content.yaml
cover.png
Is there a way to access the png and display it? Thanks.
My folder structure of Angular 10 project is given below
-Backend
-e2e
-node_modules
-src
I want to access backend/uploads/profilepic.jpg in the angular's index.html page. Simply, i just want to load an image file in the front end which is uploaded in the backend folders.
A static resource, like an image, is either bundled inside the angular webapp, by adding it to the assets folder (e.g. 'src\assets\images') and have that folder referenced inside angular.json:
"assets": [
"src/assets"
],
Or, make the backend serve that image and simply access it from the frontend like this:
<img alt="xyz" src="https://yourdomain/img_test.png">
If both the backend and frontend are hosted on the same domain, you can use relative path for the URL, i.e https://yourdomain can be omitted.
Finally, I found the solution. In order to access the files of the 'uploads' folder which is located in the backend folder. I have to make that folder static. for that in my server.js file, I have added below code
app.use('*/uploads',express.static('uploads'));
after that, I could load my image file from that uploads folder by calling
http://localhost:8090/uploads/image.jpg
I need to open an static HTML file inside an iframe because I need it to be printed silently, I’m trying setting the iframe src with absolete and relative paths but none of them work, I’ve tried moving my files inside public, static and assets folders with no success, I’ve seen that some people uses process.env.BASE_URL to access absole path of environment but it doesn’t work in Quasar.
Currently I have my files in a folder called ticketTemplates inside public folder placed at root, and it has two files: first.html and first.css, I’m doing the following:
<iframe src="ticketTemplates/first.html" frameborder="1"></iframe>
But as I said before it does not with relative or absolute paths. I've tried with http://localhost:8080/ticketTemplates/first.html too and it does not work.
Could you tell me how to achieve it?
I opened this tread in Quasar Forum and I found I was using an outdated version of #quasar/app, I updated my project and the content worked inside my iframe.
I moved my ticketTemplates folder inside public folder located in root directory, next to quasar.conf.js file and the resulting code was:
<iframe src="http://localhost:8080/ticketTemplates/first.html" frameborder="1"></iframe>
All the credit goes to the user who helped me.
I have created an vue.js app and now i want to deploy it. It generates an folder css, js and an index.html file. Is it possible to rename the css and js to, for example myAppCss and myAppJs?
I have searched in https://cli.vuejs.org/config/#global-cli-config for an solution but couldnt find anything.