CODEWITHSUNDEEP
htmlblazor
Roland Deschain
Roland Deschain

Reputation: 2830

How to debug image not found error in a blazor project?

In my small blazor project I want to display an image in a view as follows:

<img scr="img/background.jpg" class="img" alt="background">

But all I see in the browser is the 'alt'-text (sorry for the dark image, it's a dark themed website):

enter image description here

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:

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...

Upvotes: 4

Views: 1056

Answers (3)

atconway
atconway

Reputation: 21304

I have found the intellisense in Visual Studio added a path during development that seemed valid, but would not work at runtime. I had to change the following:

scr="~/myImage.jpg"

to the following:

src="myImage.jpg"

The location of the image in my example was in the root of wwwroot, so wwwroot/myImage.jpg

Upvotes: 1

Henk Holterman
Henk Holterman

Reputation: 273179

<img scr="img/background.jpg" class="img" alt="wrong">
<img src="img/background.jpg" class="img" alt="ok">

See what i did there?

Upvotes: 5

Henk Holterman
Henk Holterman

Reputation: 273179

  1. 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.

Upvotes: 2

Related Questions