When I press the button, picture doesnt show up

im making a simple application that has 4 buttons that supposed to display pictures if flowers. But when I press the first button nothing happenes and this error pops up lowerPics%C3%B075__30056__32169.1663778062.1280.1280.webp:1 GET http://127.0.0.1:5500/Chapter%201/lowerPics%C3%B075__30056__32169.1663778062.1280.1280.webp 404 (Not Found)

I have no idea what this is, google either.

let dendelionSrc =
  "flowerPics36075__30056__32169.1663778062.1280.1280.webp";
let rose = "flowerPicssingle-red-rose.jpg";
let tulip = "flowerPicstulip-types-for-spring-garden-1315804-hero- 
5 c10c927e00c459eb24c702be447e50d.jpg ";
let mayflower = "flowerPicsMayflowerTrailingArbutus.webp";
img {
  display: block;
}

button {
  margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flower Pictures</title>
</head>

<body>
  <div>
    <img id='picture' width="250" height="250" src="#">

    <button id='dendelion' class="btn" onclick="document.getElementById('picture').src =  
                   dendelionSrc">Dendelion</button> //ERROR HERE

    <button id="rose">Rose</button>

    <button id="tulip">Tulip</button>

    <button id="mayflower">Mayflower</button>

  </div>


</body>

</html>