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.
Related
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.
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'm trying to make website with localhost. The problem is, I can't get the image from mapping drive.the location of the image
I'm using <img src='z://--'> and still not working.
The reason why I'm not placing the image on htdocs it's because my pc memory can't handle all the image from that Z file.
Edit :
I'm temporarily using 'image' folder on my localhost, and I'm using the directory like this..
snapshot of my code
What i want it making new src directory from data Z and not images from the localhost...
Thank you for all you're help before.
It seems that the image your trying to show is from a shared folder. You can do the following:
<img alt="" src="file:///SERVER:/FOLDER/IMAGES/sampleimage1.png" />
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
Here I have one sub domain and folder in following URL buyjapon.This is website is belong Yii framework.
basically,we called image path as <img src="/images/usd_C.jpg" /> .I create folder in my domain in migrate into that folder, then i want to call image src just like that <img src="/images/usd_C.jpg" /> but it will not show image properly.
I have include base href in head tag
<head>
<base href="http://demo.osiztechnologies.com/buyjapon">
</head>
Note: When i call image src like this <img src="buyjapon/images/usd_C.jpg" /> it will shown correctly. but i want to change entire website by adding buyjapon in image src.
How to call this..Please guide me..
If your URL's to pages do not require the /buyjapon folder name to be present, then one option would be to create an image controller, that opens up the requested image from the images folder, and outputs it to the data stream. I do this in situations where different translations of the same image are required for different users.
However, it looks like maybe your webserver is not set up correctly - if you are using apache have you set up a virtual host for your website? That will probably solve all your issues. Look here: http://httpd.apache.org/docs/2.2/vhosts/examples.html and at your current virtualhost setup to see what to do.