I'm currently working on an assignment for school right now, and I'm trying to get an image to show up from another file.
Right now, I'm working on a page in my HTML folder, I want to get an image of a bird from my photos folder.
I typed all of the code correctly, I can't get the image to show. Both the HTML folder and the photos folder are in my Gallery project document/folder.
Here's some of the code I've already tried.
img src="/photos/bird.jpg"
img src="photos/bird.jpg"
img src="bird.jpg"
img src="gallery/photos/bird.jpg"
Again I have tried just about everything and it still won't show. I re-sized my images in Photoshop and I wonder if that messed something up. Any help would be great, thank you.
(PS. Yes, I am including the brackets, and all of the small details, i just didnt include it for the sake of time.)
EDIT: Not sure how much this really matters, but the photos folder is one level below my HTML folder. Also, my teacher wants me to keep my photos in certain folders, so I can NOT put the image in my html folder.
You have to show us the full directory path for the html and the photo for an answer.
Heres an example though:
html: project/html/index.html
photo: project/photos/examplePhoto.jpg
If you want to include the listed photo on your index page the source in the image tag would be: src="../photos/examplePhoto.jpg".
The "../" is to go back one directory, placing you in the project folder in this situation. Look up "relative pathing" to gain a better understanding.
Related
Alright, so I have been attempting to get an image to display in one of my subpages in HTML. I am sure that this is a very simple and stupid issue in regards to how I am referencing the image in the code. The image file is called crab.jpg and it is inside the pics folder which is all contained in the Websites folder. I have no problems with similar code displaying images within the index file which is the main page for the website.
<img src="Websites/pics/crab.jpg"
width="400"
height="400"/>
Not sure if this will work, unless it's in a subfolder. But try adding /
before the Websites
if that doesn't work try ../
and if that doesn't work try ../../
So, I hope this question doesn't annoy experts coz lets face it, I am a novice.
I want to get an answer as its key to my progressing with my website.
Say my website is www.example.com. I got this public hosting, and in the public_html folder i put a simple index.php file which works fine; "hello world" is displayed.
Then I put image_1.jpg in the public_html folder, and typed a direct path in my browser::
www.example.com/image_1.jpg.
Nothing gets displayed, just a black screen. But, the image is seen if I do the same on wampserver.
Afterwords, i put an image tag in the index.php file as follows:
img src="image_1.jpg"
Even then, I see the "hello world" on top, but in place of the image, i see just this standard thumbnail of a broken image. What is going on? It works on wampserver. Is there something I am missing like viewing rights? When I redownload the image, it seems corrupted (I used filezilla to upload it, and download it back again to see if its fine).
Are there any "rules" about putting images directly in the public_html folder and accessing them directly using your domain name like :: www.yourdomain.com/image1.jpg? because it works on Wampserver, not on public hosting..
Thanksss... I will (and I promise I will) send a beer to whoever can help me sort this out!
Nothing gets displayed, just a black screen.
That means your images are there. If images don't exist on the server then you will get a 404. Try reuploading and changing (or hard refreshing) browser.
I'm creating a small website for university. I'm totally new in web dev and got a problem i can't find the answer for. I was searching similar topics for some good time now but i cant the solution.
It´s important to note, that i access this website with localhost:8080/index for example. So the website is not "online". To start the site i have to go inside the folder and cmd -> npm start
We also use Handlebars (if this is somehow important), so pretty much every file is .hbs
My problem is
<img src="index.jpg" alt="index">
is just not working. It only displays the alt "index" on the page. When i use an global img url (like from wikipedia) its showing me the image. But not when i use "own" images. I was trying diffrent pictures, diffrent names, diffrent locations for the picture but it won't load.
When i use the inspector inside Firefox or Chrome it tells me img don't load(this is translated from germany, i don't know what it tells in english)
impressum.hbs and the picture are inside the same folder
I was copying the picture into every folder but still, it won't load.
You may also doublecheck that the pic is .jpg and not .jpeg, which happens sometimes.
So your index.html and your picture are in the same exact folder?
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder
The solution was an "internal" Problem. The univeristy gives us a framework and somehow you only can access pictures when they are saved inside 1 special folder. So it´s solved. Still i dont understand why they dont tell us this information directly...
How do we add an image that's not from google? It's a picture I took myself on my mobile phone and emailed it to my computer.
When making a website. Just put all your files in 1 folder. You can have subfolders. When wanting to link an image just put it somewhere in that folder and then just use the path to it.
So you need to do is provide a source for the pictures to display.
you would do
Just make sure to reference where the picture is comming from, if its in the same location as your html this will work. If its in a folder then you need to specify
here is a good reference, W3 Schools will help you alot here
http://www.w3schools.com/html/html_images.asp
One of the site's rules is:
Don't ask about questions you haven't tried to find an answer for (show your work!).
I guess this is the reason why you got those minuses.
Read here: http://www.w3schools.com/html/html_images.asp about how to add images to HTML code.
A solution for your problem could be:
<img src="myimage.jpg">, if we add images from HTML code.
background-image: url(myimagee.jpg);, if we add images from CSS code.
I've got a bunch of images on my site, ranging from icons, to pictures, to html email images, to sprites, etc..
Rather than coming up with more and more complex image names and descriptive folder paths, does anyone have experience with any software that helps manage these images with categories and tagging?
It would have to be something simple and light that the engineers on my team could use to easily locate an image asset for a left pointing arrow, even if the name is something like larr.png
Thanks!
Starting from www root folder you should have something like this.
img (main images folder)
img/sprites (sprites in here)
img/icons (icons folder)
img/html-email (html email images)
Basically, try and keep file and folder names as descriptive as possible so everything is self documenting for example...
img_001.jpg ( you don't have any idea what this image could be of )
whereas bear-catching-fish.jpg gives you a clue as to what the image is all about
I'm not clear as to what you mean by tagging though.
EDIT
Just google 'image management software' and you should find what you need such as...
Canto Cumulus