Images folder tribute project

<img src="img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id ="image">
  <p id="img-caption">

I been trying to figure out why my image doesn’t show and i haven’t had any lucky can some explain where i went wrong the image is in a parent folder called tribute-page then in that folder is a folder named img and that’s where the image lies.

Hello!

I assume you’re opening the file TributePage.html with your browser, right? (To display it as HTML, I mean).

Otherwise, could you share your code on github.com? Your entire project.

I am using the browser to see the file but this code

"img/norman-borlaug.png" 

is supposed to display this image but it doesn’t why?

Without seeing the rest of the code, I can’t tell you why :slight_smile:.

Based on your project structure, I can say that what you have here is correct: <img src="img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id ="image">.

Use the developer tools to find errors on the console of your browser. How you open them is usually with F12, but I see you’re using Mac and I don’t know the key combinations. On PC is: F12 or Control + Shift + i.

 
<div id="main">
  <h1 id="title"> Dr.Norman Borlaug</h1>

<div id="img-div">
  
  <img src="img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id ="image">
  <p id="img-caption">
    <em>Fathered a revolution that saved billons of lives<em>
    
  </p>
 </div>   

    
 <div id="tribute-info">
   <p>Norman Ernest Borlaug (/ˈbɔːrlɔːɡ/; March 25, 1914 – September 12, 2009)[3] was an American agronomist who led initiatives worldwide that contributed to the extensive increases in agricultural production termed the Green Revolution. Borlaug was awarded multiple honors for his work, including the Nobel Peace Prize, the Presidential Medal of Freedom and the Congressional Gold Medal.

Borlaug received his B.S. in forestry in 1937 and Ph.D. in plant pathology and genetics from the University of Minnesota in 1942. He took up an agricultural research position with CIMMYT in Mexico, where he developed semi-dwarf, high-yield, disease-resistant wheat varieties.[1][2] During the mid-20th century, Borlaug led the introduction of these high-yielding varieties combined with modern agricultural production techniques to Mexico, Pakistan, and India. As a result, Mexico became a net exporter of wheat by 1963. Between 1965 and 1970, wheat yields nearly doubled in Pakistan and India, greatly improving the food security in those nations.[4]

Borlaug was often called "the father of the Green Revolution",[5][6] and is credited with saving over a billion people worldwide from starvation.[7][8][9][10] According to Jan Douglas, executive assistant to the president of the World Food Prize Foundation, the source of this number is Gregg Easterbrook's 1997 article "Forgotten Benefactor of Humanity." The article states that the "form of agriculture that Borlaug preaches may have prevented a billion deaths."[11] He was awarded the Nobel Peace Prize in 1970 in recognition of his contributions to world peace through increasing food supply.</p>
  </div>
  <a href="https://en.wikipedia.org/wiki/Norman_Borlaug"  target="_blank" id="tribute-link"> <p> Learn More About Norman Borlaug<p> 

this all the code but when i take out the image out from the image folder and out of the tribute folder it displays

That’s weird :sweat_smile:. Maybe I’m misinterpreting the folder structure (not used to Mac)… Are you sure the folder structure you initially posted is the correct one? The only reason for it to work when you move the file out of the img and tribute folders is because your TributePage.html is outside of them both too.

I just tested your own code on my computer and it works as expected, without modifying anything. I just put the img folder and the TributePage.html under the same folder and the picture inside img.

@_manual, it looks as though TributePage.html is in the img directory in which case you’d just have src="norman-borlaug.png"

Some things to note;

  1. When doing the projects you don’t have to recreate the sample projects. For instance, for the tribute page pick something that interests you that you’d like to tribute. The instructions say your project has to be functionally similar to the sample and to make it your own.
  2. While you’re welcome to code locally remember that when you submit your project it has to be somewhere live and should include the test script with all tests passing.
  3. A quick scan of your code shows quite a few unclosed elements.
1 Like

based on this article, to insert images from another folder, you can add the / sign before the name of the folder to create a relative URL

<img src="/img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id="image">

That’s an absolute path :slightly_smiling_face:. Relative is without the /.

In this case is best to use a relative one, otherwise you may be referring to a folder called img at the root folder of your system (unexpected results).

Oops, that’s what I mean…

1 Like