I am trying to figure out a way for me to add some jpgs to my cats gallery. My layout includes images from one of three categories. I am using vite-react scaffold. I thought I could find a way to create one folder for each category, add all the jpgs in that folder, and then drum up some JSX to handle rendering. This is what I have so far. PS - the console is logging nothing - no errors or my attempt to confirm all the values were logging
// import { useState } from 'react'
import * as allFloofs from './assets/floofs/floofs'
function App() {
// const [images, setImages] = useState(false)
for (var i = 0; i < allFloofs.length; i++) {
let src = `${allFloofs[i]}`;
console.log(allFloofs[i])
let floof = new Image();
floof.src = src;
querySelector.image - container.appendChild(floof);
}
return (
<div className = "App" >
<div className = "image-container" >
<div> {
/* <Floofs/>
<Sleps/>
<Snyks/> */
}
</div>
</div>
</div >
)
}
export default App.App {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
text-align: center;
}
.image-container {
width: 80%;
margin-left: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.image-container div:first-child {
grid-column-start: 1;
grid-column-end: 3;
}
.image-container div:last-child {
grid-row-start: 2;
grid-row-end: 5;
}
.image {
width: 100%;
height: 30px;
}
.image img {
width: 40%;
height: 40%;
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/src/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> F.I.R </title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>