How to extract data from RxJS observable

I've been learning Angular recently and am trying to better understand RxJS. Assume I have an API response from HttpClient.get that gives me an Observable of the following JS object:

const response = {
  photos: [
    {
      id: 1,
      src: '1.jpg',
    },
    {
      id: 2,
      src: '2.jpg',
    },
    {
      id: 3,
      src: '3.jpg',
    }
  ]
}

The end result I'm looking for is: ['1.jpg', '2.jpg', '3.jpg']

I am able to do the following to get each individual src one at a time:

const source = from(response.photos);
const images = source.pipe(
    pluck('src')
);
images.subscribe({
    next(x) { 
        console.log(x); // results in: 1.jpg 2.jpg 3.jpg, one item per line.
    }
});

But what I'd like to do, and what I thought would work, is to create an observable of the entire response (as it would be given from Angular's http.get() call) and return all src properties as an array, like this:

const source = of(response);
const images = source.pipe(
    pluck('photos'),  // i expect this to be [{ id: 1, src: '1.jpg' }, ... ]
    map(x => x.src),  // i expect x to to be { id: 1, src: '1.jpg' } (but it is not)
);
images.subscribe({
    next(x) { 
        console.log(x); // i expect x to be the result of the map call earlier, i.e. ['1.jpg', '2.jpg', '3.jpg']
    }
});

I suppose I'm likely getting hung up on expecting the final value vs. the values as they arrive, or something to that effect. If anyone can help explain how to get the desired result or suggest a different/better approach, I'm hoping that something will click and things will start to make more sense.