How does an img tag works on browser?
If I have set src property to some image hosted online, and I use that in my app. Then from what I know is our app will download the image from that url and render it inside our application. But I'm confused about how will the load distribution be? What part of load will come on our server(say we are fetching that url from an API) and what will come on the url's server?
I'm actually using google's photo api(which returns url of the image hosted on their server) to render the images on my webpage.
So the download would be from their server but say if the image size is 4mb then will our network call also download 4mb since in the end the image is on our html
One of the big innovations of when the World Wide Web was first invented, was that it combined two concepts:
The identity/name of a thing (like a document or image)
The instructions on how to find it
And it packs those in a URL. So the great thing about browsers was that you no longer needed tell it what server to connect to find the thing you want. The browser just looks at a URL, and will connect to server with the name from the 'host' part of the URL, using the port in URL and protocol and retrieve the path.
So given:
<img src="http://example/image.jpg" />
The browser has everything it needs to find the image, and will do so without needing help from the server that rendered that image tag.
Related
I am trying to deal with cdn image that is given indirectly
For example, when I GET an image from the cdn url https://example.com/img/123, it gives https://example2.com/img/456 .
In this case, I found that Next <Image> isn't even loading.
How can I work around and is there a way to cache it as well?
right now I am loading all of my images from the server url. In HTML it looks like
<img [src]="http://myserverurl.../image.png" />
and this is working fine. I can see the images on the profiles. But I am also using the google maps native ionic plugin and it won't load my images from the same path. At first I thought I made some mistakes but after verifying everything it correct I was trying another png from wikipedia which was loading as well.
Afterwards I took the image, which is not loading from my server and uploaded it to an image upload service. Referencing to this image in my application is working in google maps plugin, referring the same image from my nodejs server is not.
I am using express and a public folder for providing those images.
app.use(express.static(path.join(__dirname, 'public')));
Path for example: http://192.168.178.35:4000/uploads/images/group/thumb_60f95db8d280a0639f188a6a.png
I can also access the image in the browser, so I have no clue what could be the problem. Any suggestions would be very welcome.
Google Maps Plugin: https://github.com/mapsplugin/cordova-plugin-googlemaps
That path contains the IP for your local network. I imagine using a public IP should solve your issues if wikipedia images are working fine.
I'm new to web development and i want to ask that why some website have the "/"?
for example https://www.roblox.com/home, notice the "/home" what does that called
I have tried to search on google and i can't find the answer
And some website have like "/login.php", "/index.html" it can also be html?
These are URLs (https://en.wikipedia.org/wiki/URL) and they identify the resource you are trying to reach. I would suggest reading more about how web pages works to get a better general overview of things(e.g.: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
How these resources are actually interpreted depends on the server side implementation:
.php are usually processed by PHP web server
Other static files such as images (*.png , *.jpg, etc), html files, svgs, CSS, js, etc - Are usually located in the local server by the web server (httpd, tomcat, IIS, nodejs, and many many others) and the files as transmitted to the client 'as-is'
When using online tools to build websites, these complexities are usually abstracted away, and in the end URLs will just mean a resource identifier.
[domain]/[section]/[page(.html|.php)|resource(.js|.css)]
domain: the address of the website
section: a way to navigate inside the website itself
page: the user interface that might be rendered server side of client side hold the controls shown to user
resource: files that changes how the content in the pages looks and behaves like
I just found out that if I create an html link within an entry that has my home server in it (ex. http://www.lcbcchurch.com/img/etc), it .removes my server (ex. /img/etc.)... Is there an option somewhere that I can turn this “feature” off. I do not want it to take off the server portion of the link. I use the site information in an iphone app via json request and it is currently messing up my links. Thoughts?
How can I, using the Sharepoint object model, get the URL to an image placed in the mapped images folder?
(added) I am deploying the image as part of a Visual Web Part (named ProgressWebPart for my site).
You should use the server relative url for static images:
/_layouts/images/ProgressWebPart/myImage.png
While the site relative url (no leading slash) will work, consider what happens when your web part is used in two separate sites. A user visiting these two sites would request the following images:
http://server/site1/_layouts/images/ProgressWebPart/myImage.png
http://server/site2/_layouts/images/ProgressWebPart/myImage.png
Even though both requests return the exact same file, the browser considers them distinct because they have different urls. By using the server relative url, you ensure that the user only downloads the static file once. If they visit other sites which use your web part then the browser will use the copy inside it's cache saving both time and bandwidth.
You don't need to use the OM to get this - its static and determined how your solution is packaged.
For an example - the default site logo for SharePoint 2010 will be here
_layouts/images/siteIcon.png
So http://yoursite/_layouts/images/siteIcon.png
and htp://yoursite/yoursite/yoursubsite/_layouts/images/siteIcon.png
It turns out to be (for my 'ProgressWebPart'): "_layouts/images/ProgressWebPart/"
As such, loading a PNG file into an Image control can be done in C# with:
Image image = new Image();
image.ImageUrl = "_layouts/images/ProgressWebPart/myImage.png";