I'm building a nodejs + angular application. On the server-side I have a function that uploads a new image to my angular folder under assets/images/uploads, it also saves the path of where i have uploaded it to a database.
In my angular I want to be able to show that image right after I have uploaded it. I'm trying to do this by saying:
<img mat-card-image src="../../{{users.profilePicture}}" alt="Test">
my users.profilePicture contains the correct path to where my image is stored. This doesn't work because the path is not found. However, if i restart my angular application with "ng serve" the picture will be found and displayed as desired.
I've drawn the conclusion that this must be because the assets of my application are loaded once the application starts, and cannot detect that new ones have been added while the server is already running. Is there any way to bypass this, so that I can get my angular to reload my assets folder and detect that there has been added a new picture to the folder, while the application is already running?
Ng serve loads your app in memory, so newly added items won't include in your compiled app.
You can find some solutions in this SO post:
Serve assets as they are dynamically added
Related
[I am receiving the all files in console but showing in the frontend and automatically refresh showing the whitescreen][1]
Package.json fileQ5XvT.png
To resolve white/blank screen deployment of react app in Azure, try either of the following ways:
In package.json add "homepage": "."
Make sure to publish from build folder instead of public folder
In your index.html, make sure to check to specify correct JavaScript bundle.
References: How to fix the Blank screen After a Static Deployment with create-react-app and I have deployed a azure-webapp and the page displays blank
You can see this other post: Blank page after running build on create-react-app
If you're using react-router and trying to open index.html directly in the browser (or using electron, which essentially does that), in addition to setting homepage as others have suggested, replace your BrowserRouter with a HashRouter.
I am running angular-7 app with back-end of node. I am updating home logo through back-end but it is not reflecting on UI. I am doing fs.rename to rename the uploaded file with the name of home logo image file and rename is successful but still image is not updated on UI.
I am building a React application which needs to display images dynamically which are stored, by the thousands, on a server-side file system. All of my attempts to successfully implement this have failed, including many which were taken from responses to similar questions.
Some details:
I used create-react-app to initialize my application. I am running in development mode (have not run npm-build). I'm using Express.js (Node.js) as a web-server, which I interact with through a proxy (only '/api' http requests use the proxy). My js code which attempts to 'require' the images is in the 'src' folder. The images are located in an 'images' folder in the default 'public' folder.
I thought I had found the solution when reading this page from create-react-app, as it states to use the public folder when 'You have thousands of images and need to dynamically reference their paths'. The page further instructs to use '%PUBLIC_URL%' or 'process.env.PUBLIC_URL' to access the 'public' folder. When using either of these I receive an 'Error: Cannot find module' message. Upon checking I notice that 'process.env.PUBLIC_URL' contains an empty string, and quickly notice that PUBLIC_URL is ignored in development mode.
I find this to be tremendously confusing, given that the 'Using the Public Folder' page is apparently describing the development phase of production, and yet it advises the use of something which is meaningless during development. Adding to my confusion, it appears as if the contents of that page resolved the issue for nearly all of those who have encountered a similar requirement in the past (example: 1, example: 2; both fail for me). Likewise, all attempts to to construct relative paths to the 'public' folder from the 'src' folder have yielded error messages. Failed code example:
let img = process.env.PUBLIC_URL + '/images/Team.jpg';
<img src={require(`${img}`)} alt="X" />
Error: Cannot find module '/images/Team.jpg'
I never imagined showing images in React would be so difficult. Any help is truly very much appreciated.
I think you are correct, you just don't need the require, return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; as you can see their docs
If you open in your browser http://localhost:PORT/images/Team.jpg that should open.
That's the reason process.env.PUBLIC_URL is empty in development, because they resolve everything inside this folder directly.
It's a first time I'm doing this so got some trivial (I think) problems with files upload.
I have a pair: Angular 7 app + NodeJS (express) backend. I successfully uploading files (images) through the Angular page, NodeJS save it with correct format, but I don't know what can I do to be able to target just uploaded images in my web-service and where should I store new files. Should it be : src/app/uploads or only src/app ? Can someone explain the idea behind.
Do I need to do any extra actions in Angular? Because it shows me 404 page if I try to target something out of scope of the app.
Thanks!
I think that src directory should store only source code (or something change when you update your version of code)
In my opinion, uploaded file shouldnt be stored in src directory.
Maybe
Root dir
- docs
- migrations
- node_modules
- src
- tmp
- uploaded
.......
I am having trouble displaying an image which is in my angular folder app.
here is my folder structure:
I am accessing it from the contact.component folder; I have tried accessing directly like src="../images/DNS.jpg" and relatively to the index.html file src="./app/images/DNS.jpg" and it doesn't work.
How can I reference this?
Put all your images in assets folder and Try this :
<img src="assets/DNS.jpg" />
As, angular recommends to put all your resources in the assets folder including images/fonts etc and access from there.