Official tutorial issue - Image missing in examples

[Klerith]

Describe the problem that you experienced

The official tutorial shows that we can copy/paste into the db.json file...

But you are copy/pasting the this.baseUrl which doesn't work when you get the code from the json-server.

Enter the URL of the topic with the problem

https://angular.dev/tutorials/first-app/http

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

We can just copy paste the full URL like this:

db.json


{
  "locations": [
    {
      "id": 0,
      "name": "Acme Fresh Start Housing",
      "city": "Chicago",
      "state": "IL",
      "photo": "https://angular.dev/assets/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
      "availableUnits": 4,
      "wifi": true,
      "laundry": true
    },
    {
      "id": 1,
      "name": "A113 Transitional Housing",
      "city": "Santa Monica",
      "state": "CA",
      "photo": "https://angular.dev/assets/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
      "availableUnits": 0,
      "wifi": false,
      "laundry": true
    },
    {
      "id": 2,
      "name": "Warm Beds Housing Support",
      "city": "Juneau",
      "state": "AK",
      "photo": "https://angular.dev/assets/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
      "availableUnits": 1,
      "wifi": false,
      "laundry": false
    },
    {
      "id": 3,
      "name": "Homesteady Housing",
      "city": "Chicago",
      "state": "IL",
      "photo": "https://angular.dev/assets/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
      "availableUnits": 1,
      "wifi": true,
      "laundry": false
    },
    {
      "id": 4,
      "name": "Happy Homes Group",
      "city": "Gary",
      "state": "IN",
      "photo": "https://angular.dev/assets/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
      "availableUnits": 1,
      "wifi": true,
      "laundry": false
    },
    {
      "id": 5,
      "name": "Hopeful Apartment Group",
      "city": "Oakland",
      "state": "CA",
      "photo": "https://angular.dev/assets/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
      "availableUnits": 2,
      "wifi": true,
      "laundry": true
    },
    {
      "id": 6,
      "name": "Seriously Safe Towns",
      "city": "Oakland",
      "state": "CA",
      "photo": "https://angular.dev/assets/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
      "availableUnits": 5,
      "wifi": true,
      "laundry": true
    },
    {
      "id": 7,
      "name": "Hopeful Housing Solutions",
      "city": "Oakland",
      "state": "CA",
      "photo": "https://angular.dev/assets/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
      "availableUnits": 2,
      "wifi": true,
      "laundry": true
    },
    {
      "id": 8,
      "name": "Seriously Safe Towns",
      "city": "Oakland",
      "state": "CA",
      "photo": "https://angular.dev/assets/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
      "availableUnits": 10,
      "wifi": false,
      "laundry": false
    },
    {
      "id": 9,
      "name": "Capital Safe Towns",
      "city": "Portland",
      "state": "OR",
      "photo": "https://angular.dev/assets/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
      "availableUnits": 6,
      "wifi": true,
      "laundry": true
    }
  ]
}

[millerraycell]

Question: On the tutorial the mention for the url is the "/assets" folder, which leads me to think the dev should have the pic locally, is even mentioned that

So i'm quite unsure which should be the correct expected url, just the "/assets" and provide a link for the download, or the full url as is mentioned on the description

[Klerith]

Yea, but I'm talking about the last step, where you use "json-server" to deploy your data... this is not Angular, but you use it to serve the "placeholder" data in the db.json file, in order to create a fake restful server.

However, when you asked to copy and paste, you paste code from angular to the db.json file witch will cause in errors when you try to show the image url.

[jnizet]

The posted error probably comes from the fact that you used regular quotes:

'${this.url}'

instead of backticks:

`${this.url}`

The interpolation only works when using template strings, delimited by backticks.

[JeevanMahesha]

Hi Guy's this issue is causing due to photo property value have ${this.baseUrl} as Template literals in json value.

so as a I have remove it, so if you feel we can do some alternative for this please suggest I will work on it

[JeevanMahesha]

@twerske / @MarkTechson The fix I have implemented will still result in a 404 error. The proper solution is to provide a valid image URL in the 'photo' property. Please advise on where to obtain the correct image URL.

[MarkTechson]

Thanks for reporting this - we're investigating a solution to sort all of this out.

The idea is to fix the in-browser and the local version of the tutorial with a better solution. Will update this as soon as we find the best solution here.

[michermd]

I had the same issue and waiting for a response. However you ca just hardcode the URL in the db.json to finish the last step of the tutorial.

      "id": 0,
      "name": "Acme Fresh Start Housing",
      "city": "Chicago",
      "state": "IL",
      "photo": "https://angular.dev/assets/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
      "availableUnits": 4,
      "wifi": true,
      "laundry": true
    },```
    
    

[JeanMeche]

To give some insight on the issue. Currently the build script (yarn docs:build) does not produce an artifact that contains those images.

[matthewjheaney]

If you fix the baseUrl:

readonly baseUrl = 'https://angular.io/assets/images/tutorials/faa';

Then the full URL of the photo is:

https://angular.io/assets/images/tutorials/faa/example-house.jpg

and this is indeed a valid URL for the photo.

However, when you run ng serve the application runs but it gets CORS errors when attempting to render the image.

What is the intended fix for the CORS issues?

The URL fix was made here:

#51014

The repo changes are here:

thomasturrell@7e11c70

But this doesn't solve the CORS problem. What was intended here for tutorial users?

[matthewjheaney]

Note that the tutorial page here:

https://angular.dev/tutorials/first-app/08-ngFor

still has the incorrect URL:

readonly baseUrl = 'https://angular.dev/assets/tutorials/common'

While the corresponding page here:

https://angular.io/tutorial/first-app/first-app-lesson-08

has the correct URL:

readonly baseUrl = 'https://angular.io/assets/images/tutorials/faa';

[furtivite]

I have a similar problem. I have replaced the standard URL of the image from

readonly baseUrl = 'https://angular.dev/assets/tutorials/common'

to

readonly baseUrl = 'https://angular.io/assets/images/tutorials/faa';

Now I have a picture that opens if I click on a link in an already assembled site. But at the same time, the picture is not displayed in localhost

As far as I understand, the problem is in CORS. It would be great if the instructions immediately had information on how to avoid the problem.

If I delete crossorigin from <img /> I don't have any problem at this step.

But I still have problem at data base step