Local Image isn't shown in first component without any error but not shown in it's detail component

I have blog component and details component where in single post's details is read as shown below .

Point to be noted The blog component can load and render the image but the blog details component can't . why ?

And blog details component .

directory structure :

blog>
    blog.js
    blogdetails.js

the json data locally hosted which is same for both componet blog component and single blog component

{
  "title": "Thirst Craft Gives Brooklyn Brewery’s Hazy IPA A Juicy Pop Art Makeover",
  "body": "If you ever wanted to know what a Milton Glaser logo would look like if it went through a pop art filter, then Brooklyn Brewery's Hazy IPA is likely what you’d get. And it’s a bright, bold, and incredibly playful addition to your beer cozy.",
  "author": "Hasnain",
  "id": 2,
  "img": "pics/nasa2.jpg"
}

I have tried many solutions , and checked . All the properties is rendered but only img can't be rendred in blog details component .

Single post (blogdetails)