Я помещаю этот URL: «https://picsum.photos/200 в свой js файл. Цель состоит в том, чтобы при каждом запуске изображение изменялось для каждого объекта в массиве.
теперь оно дает одно и то же изображение для всех объекты. Я хочу изменить это. Что мне нужно изменить в моем коде, чтобы это произошло?
Как я могу получить другое изображение для каждого объекта в массиве?
спасибо за Ваша помощь!
var messages = [
{
name: "magna aliqua",
text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
time: "5 hours ago",
picture: "asi.jpg",
},
{
name: "iusto odio",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "et accusamus",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "et accusamus",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "et accusamus",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "praesentium voluptatum",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "vero eos",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "iusto odio",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "quos dolores",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
{
name: "ducimus qui",
text:
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et",
time: "5 hours ago",
picture: "lior.jpg",
},
];
function showMessages() {
let messageBox = document.getElementById("messagesBox");
const allTheMessage = messages.map(
(m) =>
`<div>
<hr></hr>
<a class="avatar">
<img class="imgOfUser" src="https://picsum.photos/200">
</a>
<div class="allContent">
<span class="content">
<a class="author">${m.name}</a>
<span class="metadata">
<div class="text">
${m.text}
</div>
<span class="date">${m.time}</span>
</div>
</div>
</div>
</div>`
);
messageBox.innerHTML = allTheMessage.join("");
}
showMessages();
.author {
color: #b62626 ;
display: inline;
font-size: 22PX;
}
.imgOfUser {
display: inline-block;
width: 131px;
}
.date {
font-size: 15px;
color: silver;
}
.text{
width: 700px;
font-size: 18PX;
display: block;
}
.allContent{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Ticker</title>
</head>
<body>
<h1>Ticker Demo</h1>
<marquee scrollamount="4" behavior="scroll" direction="down">
<h1 id="messagesBox"></h1>
</marquee>
<script src="/messages.js"></script>
</body>
</html>