I'm trying to upload a particular image on my HTML. The image is in the same folder, the HTML file is also in the same folder. However, it still doesn't show me the image when I access the image on HTML.
The code for the image tag in HTML is:
<img src="Layout.jpg" alt="Layout">
Thanks in advance.
This will depend on your server. If your webpage is located at http://example.com/path/to/my/html, does the corresponding URL http://example.com/path/to/my/Layout.jpg work? It is possible that the server that you are using needs additional configuration to route the URL to the underlying image file. More details regarding your specific server / hosting platform would be needed to diagnose the issue.
Related
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
I'm uploading a folder of images for a project to GitHub and I want to display them in Flask.
<img src="https://github.com/madelinekinnaird/Gerrymandr/blob/master/images/az1.PNG">
I'm having trouble getting this to work. Do I need to use another image storage site, or is it possible to use GitHub for this purpose?
Your approach looks correct. However, you are linking to the file in the github repository. Instead, you should link to image itself. You can get the link by right clicking on the image and select "copy image address".
In your case the link would be:
https://github.com/madelinekinnaird/Gerrymandr/blob/master/images/az1.PNG?raw=true
Assuming your image are located at
https://github.com/userName/ImageRepo
Than to access that image from a browser use below link
https://raw.githubusercontent.com/userName/ImageRepo/master/FileName.ext
eg:
location: https://github.com/pavanghai/images/blob/master/wine_scatter.jpg
Browser link: https://raw.githubusercontent.com/pavanghai/images/master/wine_scatter.jpg
I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.
How would you proceed to add a picture to a website (in html or css) from your own computer?
I know how to add a picture using a url but what if the picture is stored in a folder on my computer and not on the internet?
<img src="path/to/image/image.png">
You only have to give the location of the image, use as reference the .html location.
Exs.:
<img src="image.png">
if your image is in the same folder of your html file.
<img src="../image.png">
if your image is outside of folder where your html file is and so on.
When you do that, you are going to be the only one able to access your page. If you want other people to see it you should be stored in a public folder in your web server. Look for XAMPP if you are a windows user.
If the website is hosted on your computer then you can use your images stored on your computer.You can use <img> html tag to display image.
Otherwise if it is on some remote server, then you will need a static ip and a server on your computer to host images to remote server. It is not possible to have have server on remote internet location and images on local.
If website is on internet then copy the image to server and provide path.
You can using the img tag to do this
https://jsfiddle.net/moongod101/dh55b4rz/
PS: I'm the creator of Codepenimg
Let’s pretend we have an image of a car on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:
<img src="funny-dog.jpg">
Let’s analyze this code. First, is the code for creating an image element. Next, the letters “src” are used as an attribute and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:
<img src="images/funny-dog.jpg">
There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:
<img src="funny-dog.jpg" alt="A funny dog sitting on the grass.">
I am trying to include some images in a Genshi template for my Trac plugin, but it always shows only the alternative text because it cannot find the images.
I have the following (X)HTML code:
<div>
<img src="file://c:/path/to/image.png" alt="asdf" />
</div>
When I use this code with a simple html file and open it in the browser, the image is displayed correctly, which means that both the path and syntax are correct.
But when I insert the code snippet into a Genshi template and use it within Trac, the image cannot be found. However, when I look at the HTML source code in the web browser and copy the URLs into a new browser tab, it is again displayed correctly. This means that only the server cannot find the image.
The images are in a directory inside the python-egg file, and the path points directly to the directory created by Trac, which also contains my CSS and HTML files, both of which are loaded correctly. The images are correctly referenced in the setup script which creates the egg.
How do I have to reference images in (X)HTML documents when using them with a server?
Is there a special way to include images in Genshi documents? (I haven't found one.)
Thanks to the comment of RjOllos and this site I was able to fix it by trying all of the URL types. Although it says for a plugin to be /chrome/<pluginname>, it was actually just /chrome that worked. See the edit below! So the full URL is then <ip>:<port>/chrome/path/to/image.png.
EDIT: I discovered I actually used the /chrome/pluginname version, just that I did not use the name of my plugin as "pluginname". See my comment below. It seems like /chrome/pluginname should actually be /chrome/htdocsnameor something like that, in case you use a different name rather than the plugin name when implementing the ITemplateProvider. In my case I called it images, which was the same name as the folder. END OF EDIT
Another mistake I made was forgetting the initial slash (chrome/path/to/image.png), which caused Trac to assemble the URL to <ip>:<port>/<current page>/chrome/path/to/image.png.