-1

I created an application on angular18. images are displaying on local server but when i deploy my project and upload it to my hosting then imgs are not dispalying in my project.Anyone faced this situation?

I tried many youtube videos but not finding solution. images are in public folder and in my project i placed it as <img src="img.png"> by using this path it imgs are showing in localhost but when i deploy my project and upload it to my hosting then imgs are not showing while other elements like text are showing.

Improve this question
6
  • can you provide your project's folder structure? Commented Feb 15 at 6:40
  • Is this page online and can be checked? I guess the browser looks at the wrong place. But this depends on the basehref and folder you published to. without more clarification / information this is not possible to say. Commented Feb 15 at 9:04
  • @ThomasRenger https://jamiaislamabad.edu.pk/browser/index.html this is the url. If you are free then please help me to debug this issue Commented Feb 16 at 7:03
  • @AhmadRaza you uploaded the browser folder to your hosting, but basehref is set to "/" so the application is searching not inside the browser folder. Why t´do you want to use "browser"? If so please build your application with the corresponding param for basehref and set it to you folder name Commented Feb 16 at 16:24
  • Example: because of you setup the browser looks here: jamiaislamabad.edu.pk/courses/tajweedRules.jpg but it needs to look here: jamiaislamabad.edu.pk/browser/courses/tajweedRules.jpg From my point of view, publish the content of the folder instead of the folder. Commented Feb 16 at 16:28

1 Answer 1

Reset to default
0

When using Angular you should keep your static images in the ./assets folder and then refer to those images by using for example src="/assets/img.png". You should serve your website directly from the “browser” directory for this to work correctly.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I tried this but still facing this issue. I am a beginner and it is my first experience that's why I'm getting confused. could you help me?
I've taken a look at Your website and I wasn't able to find any of the images you link to. Please upload all the images to the ./assets folder and then let me know. Also, please provide some details about your build and deployment processes. Are you just running ng build? What Angular version are you running? Are you using the stock angular.json config? How are the files deployed to the server?
I ran the command ng build --configuration=production to create a build, and I'm using Angular 18. After the build, the images are inside the browser/assets folder, but they are not displaying. Could you please help me figure out what might be wrong? Also, is there any way I can share screenshots or my project files with you, like Discord or email, if you're available? I'd really appreciate your help!
If you're keeping your images in the /assets directory and using the default Angular configuration then everything should be correct with the project. The issue is probably in the deploy process. How are you deploying your files?
I deploy it manually. i created a zip file and then uploaded it to my hosting. , is there any way I can share screenshots or my project files with you, like Discord or email, if you're available? I'd really appreciate your help!
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.