In my small blazor project I want to display an image in a view as follows:
<img scr="img/background.jpg" alt="background">
But all I see in the browser is the 'alt'-text (sorry for the dark image, it's a dark themed website):
The image is located in wwwroot/img/background.jpg. Curiously enough in the same location is the icon of the webpage, which I call within the head portion of _Host.cshtml as follows
<link rel="icon" type="image/x-icon" href="/image/icon.png">
and that is showing fine.
Following other similar posts like this one, I have already tried to change the source path to any of the following:
scr="/img/background.jpg"scr="~/img/background.jpg"scr="img/background.jpg"scr="~img/background.jpg"
None of which seem to work. So there are two questions: 1. What could be the issue to my problem and 2. How do I debug such "wrong path" type of errors. For the second part, my intuition would be to use the "view source" option in the browser and look for the image, but so far I have not found the location of the image as the server presents it to the browser. I have also tried to use a different browser, but with the same result.
Edit:
Navigating to the image with https://localhost:7001/img/background.jpg directly works as well. It just doesn't want to show from within the html for some reason...
CodePudding user response：
<img scr="img/background.jpg" alt="wrong">
<img src="img/background.jpg" alt="ok">
See what i did there?
CodePudding user response：
- How do I debug such "wrong path" type of errors.
That is a good question.
With your App running, hit F12 in your Browser. Make sure you can see the "Dev Tools".
Select the Network tab and reload your page. Find the 404 error.