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.
Related
I created a sample app using SvelteKit to perform SSR. I noticed the svelte assets are always downloaded following this path _app/immutable/.. (examples):
http://localhost:3000/_app/immutable/start-9080d3a7.js
http://localhost:3000/_app/immutable/chunks/index-cad423a5.js
http://localhost:3000/_app/immutable/layout.svelte-eb403b25.js
http://localhost:3000/_app/immutable/pages/up-homeui/index.svelte-d6a3b39b.js
http://localhost:3000/_app/immutable/error.svelte-3f23e1a2.js
How can I serve the assets at the root level, like:
http://localhost:3000/start-9080d3a7.js
http://localhost:3000/index-cad423a5.js
http://localhost:3000/layout.svelte-eb403b25.js
http://localhost:3000/index.svelte-d6a3b39b.js
http://localhost:3000/error.svelte-3f23e1a2.js
At the end, I would like to serve all the files at the same level.
I already played with the svelte.config and the vite.config but I couldn't find a way to change this default behavior.
I have tried to search for an answer here but nothing so far worked, not many threads about handlebars. Im at my 2nd year of coding and struggling to get images to show up on my node app.
I have this on app.js and below that the code im trying to get image to show up on the .hbs file:
app.use(express.static('img/'));
<img src="bckground.jpg" alt="teeest" />
Thank you in advance if someone knows what to do.
Supposing that you are serving your application at "http://localhost:3000", and your web page is "http://localhost:3000/index.html", you are requesting the image "bckground.jpg", so the browser will try to load "http://localhost:3000/bckground.jpg". This is wrong, because you are serving the static images folder under the "img" path, so the image is available at "http://localhost:3000/img/bckground.jpg".
If your application is being served at the "root" path of the domain, then this should work for you:
<img src="/img/bckground.jpg" />
Note the initial "/" at the image path. This means that the path will be calculated from the root folder of the domain. You should take this into account if you are serving your application in a subfolder.
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'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
Actually , I am beginner in nodejs field . So want to know where to place(folder name) what file (like html file , css file , js file other files).
What is the correct folder structure(formating) of the nodejs web application.
ie...
public folder is for (html , css , image etc)
I am confused. Can you help. And want to know what is the need of this type of folder convention.Is it is a standard or any other reason. ?
You can create to folder in your main project.
lib - this will hold all the server related logic.
public - this will have the client side related files. here you can create the sub folders named as : html, css and js. At the time of execution this folder you can serve as static files.
main
---lib
---public
--------html
--------css
--------js
server.js
config.json