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:

https://github.com/angular/angular/pull/51014

The repo changes are here:

https://github.com/thomasturrell/angular/commit/7e11c709fbcb4e5e873e2786e4c45d9ef1db15d2

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

[bencodezen]

For some additional context:

"Images are either missing from the deployment(https://angular.dev/assets/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg) or the path is wrong."

• Credit to Leonardo Ortiz for the context

[komura-c]

It appears to be fixed now. The image is hosted with aCross-Origin-Resource-Policy header at the following URL.

...
  readonly baseUrl = "https://angular.dev/assets/images/tutorials/common";

  housingLocationList = [
    {
      id: 0,
      name: "Acme Fresh Start Housing",
      city: "Chicago",
      state: "IL",
      photo: `${this.baseUrl}/bernard-hermant-CLKGGwIBTaY-unsplash.jpg`,
      availableUnits: 4,
      wifi: true,
      laundry: true,
    },
...

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}