Object Properties in .js files not properly executing in HTML

I’m very new to JavaScript (I have very limited Python experience as well) and am trying to find a simple way to call an object property from another .js file I have feeding into my HTML base file.

Snip of flowers.js

const rose = {name:'Rose', color:'Red', pic:'Rose.png'};

Snip of HTML base file

<html>
<head> 
<script src="flowers.js"></script>
</head>
<body>
<img id='flowerOne' src=rose.pic style='width:100px'>
</body>
</html>

This works fine if I paste the image reference in directly (“Rose.png” within img src) but not if I write out rose.pic, which theoretically has the exact same reference? I’ve managed to get .js file functions to work just fine, it just seems to be calling object properties where I’m struggling.

I’m probably not understanding something – any help is appreciated. Thank you!