Visualize the URL not the image (data in JSON server) - arrays

Question

I have an array with objects in my JSON server, and when i use .map method to get all the properties of the objects its working, except for the URL of the img. I see in the web app the URL (like a string), but not the image. Why it´s this happening? (Working on React).
This is the code with the mapping:
useEffect(()=>{
getVinos();
},[])
const [vinos,setVinos]= useState([]);
const getVinos = async()=>{
try {
const res = axios.get("http://localhost:3006/vinos").then(res=>{
setVinos(res.data);
})
} catch (error) {
alert('error')
}
}
return (
<div
style={{
color: '#fff',
display: 'flex',
flexDirection: 'column',
paddingLeft: '47px',
alignItems: 'center',
backgroundColor: '#161314',
paddingTop: '30px',
}}>
<h2>Vinos más vendidos del mes</h2>
<h4>Top Selling Wines this Month</h4>
<div>
<StyledWinesContainer>
{vinos.map((vino)=><StyledCards key={vino.id}>{vino.img} <ImgText>Prod.:{vino.nombre}
</ImgText><ImgText>${vino.precio} </ImgText> <Contador/></StyledCards>)}
</StyledWinesContainer>
</div>
</div>
);
And here is the objects array in the JSON server:
{
"vinos": [
{
"id": 1,
"nombre": "Las Perdices, reserva Malbec.",
"precio": 1500.00,
"img": "https://i.ibb.co/xzzVRDG/las-perdices-reserva-malbec.png"
},
{
"id": 2,
"nombre": "Portillo, Cabernet Sauvignon.",
"precio": 2300.00,
"img": "http://i.ibb.co/0f63kY6/portillo-cabernet-sauvignon.png"
},
{
"id": 3,
"nombre": "Alma Mora.",
"precio": 1999.99,
"img": "http://i.ibb.co/tDQP2SN/alma-mora.png"
}
]
}