Как добавить картинку png из папки в переменную

Question

Есть компонент с картинками, хочу сделать Math.random чтобы из массива картинок выбиралась случайная, никогда не добавлял картинки из папки, всегда делал только по url: let img = [{url: 'http/...'}, {url: 'http/...'}] итд, подскажите как это сделать.

Компонент:

<template>
    <div>
        <img src="../top/Cap.png" class="top_img">
        <img src="../top/Bun.png" class="top_img" v-show="toggle">
        <img src="../top/Crazy.png" class="top_img" v-show="toggle">
        <img src="../top/Curly.png" class="top_img" v-show="toggle">
        <img src="../top/Long.png" class="top_img" v-show="toggle">
        <img src="../top/Mohawk.png" class="top_img" v-show="toggle">
        <img src="../top/Mullet.png" class="top_img" v-show="toggle">
        <img src="../top/Ninja.png" class="top_img" v-show="toggle">
        <img src="../top/Ponytail.png" class="top_img" v-show="toggle">
        <img src="../top/Smooth.png" class="top_img" v-show="toggle">
        <img src="../top/Styled.png" class="top_img" v-show="toggle">
    </div>
</template>
<script>
    let topImg = [
    {},
    {},
    {}]
</script>
<style>
.top_img {
    display: flex;
    margin-top: -270px;
    margin-left: 91px;
    Width: 257px;
    height: 225px;
}
</style>

Answer 1

Можно вот так организовать вывод случайной картинки...

const arr = [
  'https://mobimg.b-cdn.net/v3/fetch/72/720f0e46ad63e7a42eb7ed350dd36614.jpeg',
  'https://kupipet.ru/upload/iblock/77f/77fdeb5f1e247fcb3e070a9b6acbc817.jpg',
  'https://zooclub.ru/attach/9000/9214.jpg',
  'https://kartinkin.net/uploads/posts/2022-12/1670373852_24-kartinkin-net-p-sobaki-milie-malenkie-krasivo-24.jpg',
]
// генерим случайный номер от 0 до длины массива
const i = Math.trunc(Math.random() * arr.length)
// создаем элемент "картинка"
const o = document.createElement('img')
o.src = arr[i]
// вставляем картинку в нужный элемент
document.querySelector('div').insertAdjacentElement('beforeend', o)

img {
  width: 90%;
}

<div></div>

БЛОГ НА HUSL

Как добавить картинку png из папки в переменную

Ответы (1 шт):