How does Usercentrics block services whose tracking works via an Image Tag?

Services that load through an image (<img>) tag are commonly know as "Pixel Trackers".
To ensure that these services can't load without your visitors' consent you can take the steps detailed in this guide.

Adding the service

Setup the Data Processing Service that provides the tracking pixel in the Service Settings section of the Usercentrics Admin Interface.

Marking up the pixel tracker

Change the src of the image tag in the source code of your website:

<img src="https//tracker.com/pxl/1.gif" width="1" height="1" alt=""/>

Replace the src attribute with data-src, this will prevent the resource from loading. To ensure the service can load when consent is given, you need to add an additional attribute data-cookieconsent with the name of the service, keep in mind that this value is case-sensitive.
This could look similar to this:

<img
  data-src="https//tracker.com/pxl/1.gif"
  data-usercentrics="XYZ"
  width="1"
  height="1"
  alt=""
/>

Allowing consented pixels to load

Implement the following script to load the any services that load through and image when consent has been given:

<script type="text/javascript">
window.addEventListener("UC_CONSENT", function() {
  const acceptedServices = [],
      dpsServices = __ucCmp.cmpController.dps.services;
  for (let e in dpsServices)
    if (dpsServices[e].consent.given)
      acceptedServices.push(dpsServices[e].name); 
  document.querySelectorAll("img[data-src]").forEach((e) => {
    e.dataset.usercentrics 
      && acceptedServices.includes(e.dataset.usercentrics) 
      && (e.src = e.dataset.src);
  })
})
</script>