How to change the src of a feature on an OpenLayers 7 map

I am trying to create a map using OpenLayers 7 that will allow the user to change the style of the marker being used. I can't seem to figure out how to change the src of the feature being used as my marker. I don't think there is a .setSrc() option and through my searching I believe it is liekyl that I should be using the setSource() option somehow but I'm not sure how/how to call that.

Here is my code so far, any help is greatly appreciated.

var london = [-0.1276474, 51.507321899999994];
var marker1 = ['https://testing.52weekdog.com/images/markers/marker_marker01_black.svg', 0.1, [0.5,1]];
var marker2 = ['https://testing.52weekdog.com/images/markers/marker_marker02_black.svg', 1.1, [0.5,1]];
    
    const baseMapTile = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true,
            title: 'OSMStandard'
    });
    
    
    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
        name: 'Somewhere near Nottingham',
    });
    
    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: marker1[2],
            scale: marker1[1],
            src: marker1[0]
        })
    });
    
    
    
const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
            });


    
    
    marker.setStyle([markerStyle]);
    
    
    const map = new ol.Map({
    view: new ol.View({         
      center: (ol.proj.fromLonLat(london)),
      zoom: 15,
    }),
        layers: [baseMapTile, vectorSource],
    target: 'map'
    
  });

var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});

map.addInteraction(translate);


function changeIcon(){
    //current icon src
    console.log(markerStyle.getImage().iconImage_.src_);
    
    //how to change the src to marker2[0]?
}

#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
}

<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Image</h2>
    <button onclick="changeIcon()">Change Marker Type</button>
</div>

Solution

Here is the solution I found for my issue. The lines of code which I needed to use were as follows:

markerStyle.setImage(new ol.style.Icon({
            anchor: newMarker[2],
            scale: newMarker[1],
            src: newMarker[0]
        }));
        marker.changed();

Here is the entire thing working as intended.

var london = [-0.1276474, 51.507321899999994];
var marker1 = ['https://testing.52weekdog.com/images/markers/marker_marker01_black.svg', 0.06, [0.5,1.1]];
var marker2 = ['https://testing.52weekdog.com/images/markers/marker_marker02_black.svg', 1, [0.5,1]];
    
    const baseMapTile = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true,
            title: 'OSMStandard'
    });
    
    
    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
        name: 'Somewhere near Nottingham',
    });
    
    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: marker1[2],
            scale: marker1[1],
            src: marker1[0]
        })
    });
    
    
    
const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
            });


    
    
    marker.setStyle([markerStyle]);
    
    
    const map = new ol.Map({
    view: new ol.View({         
      center: (ol.proj.fromLonLat(london)),
      zoom: 15,
    }),
        layers: [baseMapTile, vectorSource],
    target: 'map'
    
  });

var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});

map.addInteraction(translate);


function changeIcon(){
if (markerStyle.getImage().iconImage_.src_ == marker1[0]){
  newMarker = marker2;
} else {
  newMarker = marker1;
}

    markerStyle.setImage(new ol.style.Icon({
        anchor: newMarker[2],
        scale: newMarker[1],
        src: newMarker[0]
    }));
    marker.changed();            
}

#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
}

<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Image</h2>
    <button onclick="changeIcon()">Change Marker Type</button>
</div>