Linking images from a local source to a page

Linking images from a local source to a page
0.0 0

#1

I’m trying to practice coding using the text editor and browser on my Mac. All is good up to the point I try to add an image from my own hard drive. My understanding is that if the image file is in the same folder as the html file all I should need is replacing ? with file name. I have the image and the html files both sitting on my desktop and can’t get it to work. I shouldn’t have to upload the image to a photo sharing service. Any help or suggestions gratefully accepted.


#2

if both files are in same directory. You can reference your image from html file like this.
<img src="image1.jpg">
Good practice is to put them in the same folder together at the very least :stuck_out_tongue:
But both being on desktop together should still work fine.


#3

Heya, check this out
http://www.yourhtmlsource.com/myfirstsite/basiclinks.html

https://bytes.com/topic/html-css/answers/528328-linking-file-one-directory-up-into-different-folder


#4

Just can’t get it to work. I even modified it to link to a photo I have on flickr and that isn’t working. Code below. Grateful for any suggestions or indications I’ve done something dumb,

<!DOCTYPE>
<html>
<head>
<title>Criticus</title>
<meta name=”author” content=“Greg Taylor”>
<meta name=“description” content=“Criticus Consulting Group”>
<style>
body {background-color:#edc9af}
h1 {font-family:arial; color:red; text-align:center}
h2 {font-family:arial; color:black}
</style>
</head>
<body>
<h1>The Criticus Consulting Group</h1>
<h2>Looking at the Future</h2>
<h3>Going where no one likes to go but must</h3>
<img src="https://www.flickr.com/photos/146404975@N06/shares/07Yr68"”>
<p>We provide a collaborative partnership to examine future options critically</p>
</body>
</html>

#5

Oops I guess this converts code to web display so img code I’m using is

<img src="https://www.flickr.com/photos/146404975@N06/shares/07Yr68"”>

#6

Well I guess I don’t know how to show code in the forum.


#7

I’m not familiar with flicker. But I inspected the element of your linked picture at the provided url, using google chrome dev tools, and found this link for you. Try this link and let me know if it works. If it does, I’ll explain to you what I did.


#8

Oh I assume you went on to click on my photo and discover it’s url and use it in the way i meant, but I could have also showed you in this form.


#9

<img src="https://c3.staticflickr.com/1/468/31679933450_ca59b515e2_z.jpg" width="24" height="24">
sorry I’m new to this forum site as well. But ya I hit the formatted text button this time so it would show text instead of photo :stuck_out_tongue:
basically you were using the wrong link. You were just linking to the page that had your photo. You must link to a url consisting of only your photo, nothing else. Does that make any sense?


#10

It makes sense but I have to figure out how to get that url because the one I used was the one flickr told me to grab for sharing. Anyway it worked although I have to resize the image on the page because it’s tiny.

It doesn’t help with my inability to link to an image on my own computer that is in the same folder as the html file. Still have trouble with that. But thanks for the external link fix…I know what I’ve got to look for now.


#11

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


#12

Thank you that helps alot!


#13

@gftaylor - If you’re going to start working on building sites locally, which I think is a great idea, it’s best to organize your projects rather than placing everything on the desktop. The sooner you get into that habit the easier it will be when you start using git or some other source control tool. Everyone does it differently, but for me, I usually use this for a basic template to organize my projects.

C:\
|-- workspace
    |--- WebProjects
        |-- Project1
            |-- css
                |-- site.css
            |-- images
                |-- image01.png
                |-- image02.png
            |-- scripts
                |-- site.js
            |-- index.html

Then when I need to access like an image file from the page, I write it like this:

<img src="images/image01.png" alt="my image" />

#14

Thanks. Very helpful. I’ve been gone for a few days…now bak to the fun.