I've made a clumsy example of how to do it here:

https://codepen.io/javiercampos/pen/abwwrWX

The code:

  $('ul>li').each(function() {
    if($(this).children().css("background-color") == 'rgb(255, 255, 255)') {
      $(this).css('background-image', 'url(//media.istockphoto.com/vectors/abstract-blurred-colorful-background-vector-id1185382671?k=20&m=1185382671&s=612x612&w=0&h=QvHSiV0uDYhl69m1rpIt0aYbk4vmpl9kjVcfkMkgyfw=)'); 
      $(this).children().css('background-color', "");
    }
    if($(this).children().css("background-color") == 'rgb(0, 0, 0)') {
      $(this).css('background-image', 'url(//miuc.org/wp-content/uploads/2018/02/How-can-colours-help-you-in-your-everyday-life.jpg)'); 
      $(this).children().css('background-color', "");
    }
  });

Note that I'm checking for the background-color CSS property that returns a string in the form rgb(x, y, z), not necessarily how it's applied in the HTML.

I'm also removing the background color in the a (in all direct descendants of the li basically) because that's probably what you want.

Note that this solution is pretty clumsy and will only work if the HTML is exactly how you paint it in the question, but it might be a start (also, the chosen images do not represent "white" or "black" at all, they are the first two results from google images searching for "color image")

See if it helps you

note: You set bgcolor on anchor tag. You can use window.getComputedStyle(list).backgroundColor for each element Like this

// select all a tag
var lists = document.querySelectorAll('ul > li > a');

// looping foreach
lists.forEach(list => {
  const bgcol = window.getComputedStyle(list).backgroundColor;
  console.log(bgcol);
  bgcol == 'rgb(204, 204, 255)' ? console.log('Change to Img') : console.log('Skip');
})

<ul class="tt-options-swatch options-middle filtres-js">
<li>
<a class="options-color" style="background:#000000"  href="/collections/black">Black</a>
</li>
<li>
<a class="options-color" style="background:#FFFFFF"  href="/collections/white">White</a>
</li>
<li>
<a class="options-color" style="background:#ccccff"  href="/collections/violet">Violet </a>
</li>
</ul>

but window.getComputedStyle(list).backgroundColor return rgb, note a hexa color like `#fff

Couldn't you just put the style inside the data attribute? <a class="options-color" style="background:#FFFFFF" data-style="white" href="#">White</a>.

This way you could get the value of the data and use as href.

const hrefColor = element.dataset.style then element.href = '/collections/'+hrefColor