Just GET

Css local image url

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The url() function can be passed as a parameter of another CSS functions, like the attr() function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the data type.

/* Simple usage */ url(https://example.com/images/myImg.jpg); url(data:image/png;base64,iRxVB0…); url(myFont.woff); url(#IDofSVGpath); /* associated properties */ background-image: url("star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* Properties with fallbacks */ cursor: url(pointer.cur), pointer; /* Associated short-hand properties */ background: url('star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* As a parameter in another CSS function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/")  . > Экспериментальная возможность @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); 

Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true s.

Syntax

Values

A string which may specify a URL or the ID of an SVG shape.

A URL, which is a relative or absolute address, or pointer, to the web resource to be included, or a data URL, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:

: url("https://example.com/image.png") : url('https://example.com/image.png') : url(https://example.com/image.png) 

If you choose to write the URL without quotes, use a backslash ( \ ) before any parentheses, whitespace characters, single quotes ( ‘ ) and double quotes ( » ) that are part of the URL.

References the ID of an SVG shape — circle , ellipse , line , path , polygon , polyline , or rect — using the shape’s geometry as the path.

In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string. This is not supported and not fully defined in the specification.

Источник

How to add image that is on my computer to a site in css or html?

I have an image that I made in photoshop on my computer and I was wondering if there is a way to add the image to my website with CSS or HTML without having to image on a website. Thanks.

6 Answers 6

This worked for my purposes. Pretty basic and simple, but it did what I needed (which was to get a personal photo of mine onto the internet so I could use its URL).

1. Go to photos.google.com and open any image that you wish to embed in your website.
2. Tap the Share Icon and then choose «Get Link» to generate a shareable link for that image.
3. Go to j.mp/EmbedGooglePhotos, paste that link and it will instantly generate the embed code for that picture.
4. Open your website template, paste the generated code and save. The image will now serve directly from your Google Photos account.

Check this video tutorial out if you have trouble.

The image needs to be in the same folder that your html page is in, then create a href to that folder with the picture name at the end. Example:

If the HTML and image are in the same folder, then his site wouldn’t be remote and he wouldn’t need to use the full path.

No, Not if your website is on a remote server, i.e not on localhost.

If you just want to see the image on your local browser, this can be done if you have a server running locally. You just need to reference the local server via http (not file://), like:

http://localhost/my_picture.jpg 

if picture.jpg is in your local server’s webroot folder. You can do this for any site if you open your browser’s developer tools and change the img element’s src attribute to the local server’s URL for the image. If you have access to the HTML of your site, then change it there. But obviously if someone not on your local computer/server accesses the site, they will get a broken image unless they happen to be running a local server as well and have an image with the same filename, which would be weird.

Источник

How to show local picture in web page?

@John yup, in the context of an image this should work fine. (IIRC, there are restrictions in place for local iframes for security reasons — and of course, you can never parse local documents due to the Same Origin Policy — but images should be okay.)

This will only work if the webpage is saved locally. Most browsers won’t let a remote webpage embed a local file.

@Lèse @John I stand corrected: The latest Chrome, FF and IE indeed block images from local sources (FF since 1.5). @Artem this seems not possible any more.

6 Answers 6

You can do that easily using FileReader.readAsDataURL() . The user chooses an image and you can display it without needing to upload it.

function previewFile() < // Where you will display your image var preview = document.querySelector('img'); // The button where the user chooses the local image to display var file = document.querySelector('input[type=file]').files[0]; // FileReader instance var reader = new FileReader(); // When the image is loaded we will set it as source of // our img tag reader.onloadend = function () < preview.src = reader.result; >if (file) < // Load image as a base64 encoded URI reader.readAsDataURL(file); >else < preview.src = ""; >>

Linking to local image files from remote HTML files used to be possible, but no longer is.

• In Firefox since version 1.5 (background and config options here)
• In Internet Explorer I think since Version 8 (I believe I have successfully done this in IE 7, but I can’t find hard data)
• In Chrome probably since forever

See for example this vulnerability report for why this is a good thing.

I don’t think there is a workaround. You will just have to upload the image first.

You must make a way to answer file requests and move your files near your project source. then make your addressing relative. This is my code which works fine for me:

package ir.cclever.example; import java.awt.List; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStream; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.ArrayList; import java.util.Date; import java.util.regex.Matcher; import java.util.regex.Pattern; public class WellCloseWebServer < public class clientInfo< public String ip; public Date visitTime; >static ArrayList clients = new ArrayList(); public void start() throws IOException < ServerSocket listener = new ServerSocket(8181,1000); System.out.println("Webserver starting up on port 8181"); System.out.println("Waiting for connection"); //==========================regex String pathRegex = "(?"); while(!(line = in.readLine()).equals(""))< wholeRequest = wholeRequest.concat(line + "\n
"); > wholeRequest = wholeRequest.concat("\n
\n
\nClient IP Address : " + socket.getRemoteSocketAddress().toString()); wholeRequest = wholeRequest.concat("\n
\n
\nClient Opened Port : " + ((Integer)socket.getPort()).toString()); clientInfo newClient = new clientInfo(); newClient.ip = socket.getRemoteSocketAddress().toString(); newClient.visitTime = new Date(); clients.add(newClient); Matcher pathMatcher = pathPattern.matcher(requestHeaders); Boolean anyPath = pathMatcher.find(); System.out.println("Connection, sending data to request : " + requestHeaders); try < PrintWriter out = new PrintWriter(socket.getOutputStream(), true); DataOutputStream dos = new DataOutputStream(socket.getOutputStream()); if (!anyPath) < JustHello(out); >else < String directory = pathMatcher.group(); System.out.println(directory); if (directory.toString().equals("pic")) < JustPic(out); >else if(directory.toString().startsWith("server/")) < getFile(directory,dos,true); >else if(directory.toString().endsWith("jpg")) < getFile(directory,dos,false); >else if(directory.toString().equals("my.aspx")) < mirror(out,wholeRequest); >else if(directory.toString().equals("clients.html")) < WholeClients(out); >else < errorPage(out); >> > catch (Exception e) < // TODO Auto-generated catch block e.printStackTrace(); >finally < socket.close(); >> > finally < listener.close(); >> private void InvalidRequestMethod(PrintWriter out, String string) < // TODO Auto-generated method stub out.println("HTTP/1.0 404 NOT FOUND"); out.println("Content-Type: text/html"); out.println("Server: Bot"); // this blank line signals the end of the headers out.println(""); out.flush(); // Send the HTML page out.print("\n\n\n\n\n\n\nInvalid request mehtod! : "+ string +"\n\n"); out.flush(); > private void errorPage(PrintWriter out) < // TODO Auto-generated method stub out.println("HTTP/1.0 404 NOT FOUND"); out.println("Content-Type: text/html"); out.println("Server: Bot"); // this blank line signals the end of the headers out.println(""); out.flush(); // Send the HTML page out.print("\n\n\n\n\n\n\nContent not found on server!\n\n"); out.flush(); > private void WholeClients(PrintWriter out) < // TODO Auto-generated method stub out.println("HTTP/1.0 200 OK"); out.println("Content-Type: text/html"); out.println("Server: Bot"); // this blank line signals the end of the headers out.println(""); out.flush(); // Send the HTML page out.print("\n\n\n\n\n\n\n"); Integer i=0; for (clientInfo item : clients) < i++; out.print("
\n"+i.toString()+") ip : " + item.ip + " | visit time : " + item.visitTime.toString()); > out.print("\n\n"); out.flush(); > private void mirror(PrintWriter out, String requestHeaders) < // TODO Auto-generated method stub out.println("HTTP/1.0 200 OK"); out.println("Content-Type: text/html"); out.println("Server: Bot"); // this blank line signals the end of the headers out.println(""); out.flush(); // Send the HTML page out.print("\n\n\n\n\n\n\n" + requestHeaders.toString() + "\n\n"); out.flush(); > private void getFile(String directory, DataOutputStream os, boolean b) < String CRLF = "\r\n"; // Open the requested file. String fileName = directory; FileInputStream fis = null; boolean fileExists = true; try < //(new File(fileName)).mkdirs(); fis = new FileInputStream(fileName); >catch (FileNotFoundException e) < fileExists = false; >// Construct the response message. String statusLine = null; String contentTypeLine = null; String entityBody = null; if (fileExists) < statusLine = "200 OK" + CRLF; contentTypeLine = "Content-type: " + contentType( fileName ) + CRLF; >else < statusLine = "404 NOT FOUND" + CRLF; contentTypeLine = "Content Not Found!" + CRLF; entityBody = "" + "" + "Not Found"; > // Send the status line. try < if (b) < os.writeBytes(statusLine); // Send the content type line. os.writeBytes(contentTypeLine); // Send a blank line to indicate the end of the header lines. os.writeBytes(CRLF); >// Send the entity body. if (fileExists) < sendBytes(fis, os); fis.close(); >else < os.writeBytes("File DNE: Content Not Found!"); >> catch (IOException e) < // TODO Auto-generated catch block e.printStackTrace(); >catch (Exception e) < // TODO Auto-generated catch block e.printStackTrace(); >> private static String contentType(String fileName) < if(fileName.endsWith(".htm") || fileName.endsWith(".html")) < return "text/html"; >if(fileName.endsWith(".jpeg") || fileName.endsWith(".jpg")) < return "image/jpeg"; >if(fileName.endsWith(".gif")) < return "image/gif"; >if(fileName.endsWith(".png")) < return "image/png"; >if(fileName.endsWith(".js")) < return "text/javascript"; >if(fileName.endsWith(".css")) < return "text/stylesheet"; >return "application/octet-stream"; > private static void sendBytes(FileInputStream fis, OutputStream os) throws Exception < // Construct a 1K buffer to hold bytes on their way to the socket. byte[] buffer = new byte[1024]; int bytes = 0; // Copy requested file into the socket's output stream. while((bytes = fis.read(buffer)) != -1 ) < os.write(buffer, 0, bytes); >> private void JustHello(PrintWriter out) < // TODO Auto-generated method stub out.println("HTTP/1.0 200 OK"); out.println("Content-Type: text/html"); out.println("Server: Bot"); // this blank line signals the end of the headers out.println(""); out.flush(); // Send the HTML page out.print("\n\n\n\n\n\n\nHello World\n\n"); out.flush(); > private void JustPic(PrintWriter out) < // TODO Auto-generated method stub out.println("HTTP/1.0 200 OK"); out.println("Content-Type: text/html"); out.println("Server: Bot"); // this blank line signals the end of the headers out.println(""); out.flush(); // Send the HTML page out.print("\n\n\n\n\n\n\n\n\n"); out.flush(); > > 

see the if clause that responds to the requests that start with /server. the follow the code to where it handles the request. it returns the files as a file transporter. so the address here «server/image.jpg» will be a address that you give in regular programming in java. this address is from the root of your project. mention that this code must have a main to use the class. this works perfect for me.

Источник

Local image URL syntax?

I have a folder of images on my local disk. If I drag one onto the Firefox icon in my toolbar, it shows that image in browser. The URL in the address bar is: file:///E:/%5B%20Program%20%5D/TempProject/%5B%20Win%20Project%20%5D/%5B%20Samim%20%5D/Samim_NewVersionSource/EducationalErpSolution/EducationalErp/bin/Debug/ImagesWeb/1.jpg However, if I use that URL as the src attribute on an img element, I get a broken image. Is there a way to get the browser to display an image coming from the local file system, and if so, what’s the syntax for the URL?

you shouldn’t be using absolute urls for resources in a HTML page. You should be using URL’s that are relative to your page.

You can’t do that in live website — in such website you can show images only from the server disk, not client machine. To show images from client, you’ll first have to upload them to the server using server side language like PHP or ASP.NET

By the way @hashi neither Alastair nor John saw your comment, when there’s more than one commenting you need to notify each person using @ for example @John will notify JohnFx.

2 Answers 2

You could base64 encode your images using one of the many free online services and include them in your html:

Источник