I want to display jpeg images stored in the backend.
Frontend is Vue3.
I want to display with img tag
but, I can't open src path of img
I want to go one level above the vue directory, but I can't.
I have tried the two paths below.
src="/public/images/playlist/5.jpeg"
=> http://localhost:3000/public/images/playlist/5.jpeg
=> undefined
src="/../public/images/playlist/5.jpeg"
=> same as above
=> undefined
Directory structure
Vue is embedded inside the backend.
Port of express is 3000.
If anyone knows, please let me teach.
Technology
Frontend
Vue3
Backend
Node.js
Express
Related
I have an angular application that is gona be installed on many sites (owner requeriment) but, for every site, the configuration must be different (colors, some texts, some logos, backend server, etc). I want to write a configuration file that will be read by the angular app and then apply that configuration, I will put the file in every site and when I make a change to the backend server, any configuration text or other configuration I will only change the configuration file and the angular app will work transparently.
How can I achieve this?
I was thinking in writing a json file and read it from angular. Is this a good practice?
you can use 'environment.ts' for your problem.
but I use 'environment.ts' or 'environment.prod.ts' for the Variables that have different value in product and develop mode.
for values like store/app/crm name, simply you can add 'ts' file like 'myAppConfig.ts' in 'src' folder or 'app' folder.
then declare your variables like this:
export const myAppConfig = {
appName:'samuels online store',
expireDate:'2023/30/12',
customerName:'samuel l jackson'
};
then you can use it,like this:
first import it in your 'ts' file, for example in 'app.component.ts'.
import { myAppConfig } from 'src/myAppConfig';
then use the values of it, like this:
customerName = myAppConfig.clientName;
finally, you can put or change values in 'myAppConfig' from your backend and give a fresh version to your new customers.
have a good time!
I am fetching the image urls from database (dump from production server).
For example, say - https://example.com/imageStorage/photo.jpg is an url fetched from database.
And these urls are used to show images in HTML templates like this -
<img [src]="url">
Now in development i want to redirect these urls to fetch images from a local folder. I am using NodeJS express and angular in my application. Is there any way to do it. I tried to proxy the requests with no success.
Use this extension
https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj?hl=en
and then add a url redirect like this
I have a laravel application that is working, but I need to display HTML files and assets (css and images), the web files were exported from another application built with python, so the HTML pages are very much (in hundreds), so I cannot be able to route each and every one of the pages.
I used the code below to route to the index page, but when I click on the link to another page, it returns 404
// Route::get('/index', function () {
// return file_get_contents(public_path() . '/pages/index.html');
// });
Please, how can I serve the pages, the folder is in the public folder of my laravel app.
I solved this by embedding it in an iframe tag in the blade file
What I did was, I hosted the web files generated from the python application on AWS S3 bucket, then I hosted the Laravel application on AWS Beanstalk, then I copy the S3 endpoint and embed it in the Laravel blade file using iframe, with this the web files are hidden under the authentication of the laravel app.
I have a JSON file, and I have some audio file in each entry.
{
{
audio: '~/audios/1.mp3'
info: 'some other info'
},
{
audio: '~/audios/2.mp3'
info: 'some other info'
},
{
audio: '~/audios/3.mp3'
info: 'some other info'
}
}
Now I would like to put all of this stuff in my MongoDB database (instead of using this JSON). In the very end my app will be using some service to store the mp3 files on some super-efficient server I guess, so I would need to save their proper links in my MongoDB. So I guess I will have links like https://cdnjs.cloudflare.com/bla/data/audio1.mp3 (for example) - But how do I generate these links and pop them into my MongoDB database?
I'm not sure if I understand your question. Just upload your audio to your CDN. It should generate the links for you. You can save these to MongoDB by interfacing directly with the Mongo shell or using the Mongoose ORM. If users are going to be uploading music to your app directly, you will probably be using some external API to upload files. For example, if you wanted to upload Images to the Imgur API, you would send data to their API endpoints for image uploads and their API would automatically return a link to your image. You would need to write a callback function that checks whether the image upload went correctly - if all went well and you don't need to throw an error, you would have a method written in your callback to create a new document in MongoDB/Mongoose to save that link, following a schema that makes it logically possible to retrieve the location/uploader (also saving a reference to the user who uploaded it, for example)
You would also probably be using HTML's to handle this, if it's a web app
Alternatively, you can set up your own methods on your back-end server for storing and retrieving file uploads, hosting on Amazon will give you a lot of bandwidth to work with.
In this url http://localhost:3000/retrieve.txt, I have the data like this:
192.168.7.102,192.168.7.123
Then how to display this data into a text box of html page using node.js.
Node.js is your backend. It cannot directly alter the contents of an HTML page. This will be done by your frontend i.e. the page itself. But the page needs to get the data from the backend.
What Node.js can do is:
read the file (either through an http request to http://localhost:3000/retrieve.txt or by open the file locally with fs module functions)
parse the contents of the file
setup a REST endpoint (using ExpressJs or any other web framework) that will serve this data to whoever does a GET request there
Your frontend (HTML page) will then need to make an XHR (using jQuery is always a quick'n'easy choice) to this REST endpoint to get the data and then place it in the corresponding DOM element.