-
Notifications
You must be signed in to change notification settings - Fork 25.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Official tutorial issue - Image missing in examples #52794
Comments
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 |
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. |
The posted error probably comes from the fact that you used regular quotes:
instead of backticks:
The interpolation only works when using template strings, delimited by backticks. |
@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. |
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. |
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.
|
To give some insight on the issue. Currently the build script ( |
If you fix the baseUrl:
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 What is the intended fix for the CORS issues? The URL fix was made here: The repo changes are here: But this doesn't solve the CORS problem. What was intended here for tutorial users? |
Note that the tutorial page here: https://angular.dev/tutorials/first-app/08-ngFor still has the incorrect URL:
While the corresponding page here: https://angular.io/tutorial/first-app/first-app-lesson-08 has the correct URL:
|
I have a similar problem. I have replaced the standard URL of the image from
to
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 But I still have problem at data base step |
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."
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
The text was updated successfully, but these errors were encountered: