Local angular app can't find my assets folder images

Question

I am working on a project locally and am having trouble getting an image to show. I have everything correct from what I believe but can't seem to pinpoint or debug this issue. The error I am getting is this:

GET http://localhost:4200/assets/img/SS88.jpg 404 (Not Found)

Everything that I believe that need to be correct is shown below. project folder structure leading to image

Nested into angular.json: projects > projName > architect > build > options > assets (it is also identical under test)

"assets": [
  "src/client/favicon.ico",
  "src/client/assets/img",
  "src/client/assets"
],

html img tag created from dragging the image from asset/img folder onto html.

<img src="../../../assets/img/SS88.jpg" height="183" width="275" alt="pic"/>

Also when I build the project locally the image is in the correct folder in dist, and it doesn't return a 404 Not Found in the network tab of google chrome, but the image still doesn't appear and it shows the alt text.

PS I have converted this project from an angular app to a monorepo and have moved most of the project specific files nested one layer deeper into a client folder. My belief is that may have something to do with it, but I'm not sure what changes to make in the project other than the ones I've made, that would get the images to show.

Answer 1

To display image from assets folder, try this

<img src="assets/img/SS88.jpg" height="183" width="275" alt="pic"/>

Hope useful