title: How to display image from JSON object in Angular
body: <p>I have a page where I want to show images or videos shared by various people. I am not able to fetch image from rest API. API looks like</p>
  <pre><code> {
  &quot;status&quot;: &quot;success&quot;,
  &quot;code&quot;: 200,
  &quot;response&quot;: [
  {
    &quot;Id&quot;: 91,
    &quot;Media&quot;: [
      {
        &quot;ImagePath&quot;: &quot;http:/13.232.25.79:4105/files/7/7051252eae6820fd3309120d72fe2978.jpg&quot;,
        &quot;LikeCount&quot;: 0,
        &quot;Comment&quot;: &quot;&quot;
      },
      {
        &quot;ImagePath&quot;: &quot;http:/13.232.25.79:4105/files/7/car.jpg&quot;,
        &quot;LikeCount&quot;: 0,
        &quot;Comment&quot;: &quot;&quot;
      }
    ],
    &quot;CandidateId&quot;: 7,
    &quot;Message&quot;: &quot;hello&quot;,
    &quot;CreatedAt&quot;: &quot;2020-12-15T11:31:12.488Z&quot;,
    &quot;Candidates&quot;: {
      &quot;Id&quot;: 7,
      &quot;FirstName&quot;: &quot;Rajesh&quot;,
      &quot;LastName&quot;: &quot;Bhati&quot;
        }
     }
     ],
     &quot;error&quot;: [],
    &quot;message&quot;: &quot;Media list&quot;
    } 
  </code></pre>
  <p>I have tried following code</p>
  <p><em>my component.html</em></p>
  <pre><code> &lt;div class=&quot;form-group&quot; *ngFor=&quot;let candidateMedia of sharedMedia&quot;&gt;
      &lt;div class=&quot;container_box&quot;&gt;
           &lt;p&gt;{{candidateMedia.Candidates.FirstName }}         
            {{candidateMedia.Candidates.LastName }} shares following post&lt;/p&gt;
         &lt;img src=&quot;{{filteredImages(candidateMedia.Media.ImagePath)}}&quot;&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p><em>my componenet.ts file</em></p>
  <pre><code> ngOnInit() {
  this.socialService.getMedia().subscribe((res: any) =&gt; {
    this.sharedMedia = res.payload
  })
   }
  
    filteredImages(value) {
  const imageString = value.replace('13.232.25.79:4600/', '')
  return imageString
  }
  </code></pre>