angular return not found for the product photoes

Question

i have this problem for several weeks now, the product photos return not found and other property return fine,

i have test the api with postman and work fine , there is something wrong iam missing, 'iam using abgular 15 and .NET7, the products and the photos are there on console log dev tools, see the attachment picture,

postman:

"pageIndex": 1,
    "pageSize": 6,
    "count": 21,
    "data": [
        {
            "id": 8,
            "name": "ASUS",
            "photoUrl": "images/products/ASUS2.jpg",
            "specification": "ASUS zenbook pro 14 Core i7",
            "generation": "12th Generation",
            "price": 500.99,
            "condition": "New",
            "quantity": 1,
            "storageSize": "512 SSD",
            "ramSize": "32 GB RAM",
            "touchScreen": true,
            "photos": [
                {
                    "id": 8,
                    "url": "images/products/ASUS2.jpg",
                    "isMain": true
                }
            ],
            "productType": "ZenBook",
            "productBrand": "ASUS"
        },

the problem: enter image description here

Answer 1

The question is not so clear, but from what I understand is that you are sending the image URLs and you are keeping the images in the frontend server under the images folder. And your images folder is the same level as your src folder.

You probably forget to add the images folder directory into the angular.json file. There are 2 places to add your directory for each project under the angular.json file.

Open your angular.json,

1st place - projects -> <your-project-name> -> architect -> build -> options -> assets

2nd place - projects -> <your-project-name> -> architect -> test -> options -> assets

It is mainly an array of strings but you can be more specific by sending an object of “{glob, input, output, ignore, followSymlinks}” for what to include and what don’t. But what you only need is to send the directory as a string so your assets properly should look like this.

"assets": [
  “images",
…
]

If your images folder is under src then it should look like this instead

"assets": [
  “src/images",
…
]

More details on it https://angular.io/guide/workspace-config#asset-config