I try to display an image in a blazor server side app but it does not load. This is my code:
<img src="#imageSource" alt="..."/>
#code {
private string? imageSource = #"..\samplePic\logo.png";
}
I also tried this:
<img src="..\samplePic\logo.png" alt="..."/>
still not loading. But than I tried it with an online picture:
<img src="https://thumbs.dreamstime.com/b/hand-building-trends-concept-wooden-blocks-closeup-wood-149391549.jpg" alt="..."/>
this worked. So how can I get my local pictures running
By default you cannot access files outside of wwwroot (which is what you are doing with ..\) because they do not exist in the server.
Your first possibility is to move your image in wwwroot.
Another possibility would be to specify a static folder to give access to files outside of wwwroot.
See the Doc about static files.
Related
This might be a really stupid question, but here goes nothing
Currently I have the following in my HTML:
<div class="disk-images">
<img src="../public/images/blueflame.png">
<img src="../public/images/purpleflamelogo.jpg">
</div>
I have not styled it in my CSS, but AFAIK, this should not be a problem, as the default style sheet should still take care of it.
I also know the path to these images is correct as, when I Ctrl + click on it in VSCode, it shows me the image.
This is what it shows instead:
This would suggest, that the path to the images are wrong, however, as previously stated, I do believe the path is correct. Any help would be greatly appreciated!
For people having the same problem in the future, the problem was with express and how static files in express work.
I had the following in my app.js
app.use( express.static( "public" ) );
which meant the root folder for my static assets was actually another directory.
You can read up on it here
you can check your console for any 404 messages, and try to close the whole project and re-open it in your editor and browser as you may working on an old version
relatively path is correct but the files in the public folder are static files such as index.html, javascript library files, images, and other assets, etc. Files in this folder are copied and pasted as they are directly into the build folder. Only files inside the public folder can be referenced from the HTML.
Updated code:
<div class="disk-images">
<img src="images/blueflame.png">
<img src="images/purpleflamelogo.jpg">
</div>
I want to display the image from my local , but it is showing like this.
I don't understand what is wrong here!
The below img code i'm using in provider.js file
<img src='../../../public/icons/videoOn.png'/>
After looking at the screenshot, this looks like a React JS project. For static assets, you need to import them, but only when they're inside the src folder. If they're inside the public folder, you can do this:
<img src='/icons/videoOn.png' />
The above code should work for you. If you're deploying it to a non-root and should be safer, then use process.env.PUBLIC_URL:
<img src={process.env.PUBLIC_URL + '/icons/videoOn.png'} />
Don't use path as src, because it must be accessible via web.
Means you need src="http://example.com/public/icons/videoOn.png" or src="/public/icons/videoOn.png"
In that situation always check Network tab and see from where your browser tries to get file. You must be able to go to same URL and access file
I have deployed a site to Firebase hosting and everything works great, expect that the images are not loading.
I'm linking to them in the public folder that I deploy to the host.
Do I need to add them to something like FireStore and link to that URL?
<img class="img-fluid img" src="/Users/myprofile/desktop/folder/public/name.svg" alt="">
(I have removed the original path)
The alt is empty.
Thank you
The problem was that I was linking with the full url.
Like so:
src="/Users/myprofile/desktop/folder/public/name.svg"
As the pictures was in the same public folder, I only need to use the name.svg.
I am trying to insert an image from my local directory which is in
resources folder, full path is resources\images\logo-2.png
My dynamic html is <img src="resources/images/logo-2.png" alt="logo">
and in my final output it gives me this
<img src="https://ci3.googleusercontent.com/proxy/2uoPI9RTChl3eYeKfRBGfR4AtNAs6Xuk5rrSPz9dDmyyXgeq4dj_pxg9VWqI4lhsiL60IRKAjnw=s0-d-e1-ft#http://resources/images/logo-2.png" alt="logo" class="CToWUd">
I dont know whats that initial url is, but i am not getting the image from my path.
You could always try outsourcing using the IP address as your route instead?
<img src="http://192.0.0.1/resources/images/logo-2.png" alt="logo"> //change 192.0.0.1 to whatever your local route is.
depending on how you have your webserver is set up it may just not support local casting to directory.
I am trying to show an image which is located in a folder in my Desktop. My problem is this when i set source to image thymeleaf or spring engine appends localhost:8080 to its path.
<img alt="" src="/Users/abdullahtellioglu/Desktop/ZambakResimler/yarnartjeans.jpg">
This is the image path. I also tried this one.
<img th:src="#{/Users/abdullahtellioglu/Desktop/ZambakResimler/yarnartjeans.jpg}" alt="" />
Both of them gives me the following path.
http://localhost:8080/Users/abdullahtellioglu/Desktop/ZambakResimler/yarnartjeans.jpg
I am not sure how to remove localhost:8080 from path and make the path absolute.
What are you doing is not how a server should works. When you want to make available some resource from your webapp you need to it to your web app resources. Here is a brief example of how could you fix it.
Go to the folder src/main/resources and create a folder called static.
Under that folder create another one called img and inside copy your image. So we would have something like this now:
src
main
resources
static
img
yarnartjeans.jpg.jpg
Now go to your thymeleaf HTML page and use this
<a href="product_detail.html">
<img th:src="#{/img/yarnartjeans.jpg}" alt=""/>
</a>
Now your HTML page will load your image correctly
Good luck