Generalise img

js/script.js

@@ -6,16 +6,16 @@ window.addEventListener('load', () => {
 		const elem = funkoTemplate.content.cloneNode(true);
 		const special = ['img', 'href'];
 
-		elem.querySelector('.funko__img').setAttribute('src', `img/${funko.img}.jpg`);
+		elem.querySelector('.funko__img').setAttribute('src', `../img/${funko.img}.jpg`);
 		elem.querySelector('.funko__readmore').setAttribute('href', `/${funko.href}.html`);
 
 		for (const [k, v] of Object.entries(funko)) {
 			if (special.includes(k))
 				continue;
-			
+
 			elem.querySelector(`.funko__${k}`).innerHTML = v;
 		}
-		
+
 		funkoContainer.appendChild(elem);
 	});
-});
+});

plain/index.html

@@ -18,45 +18,45 @@
 		<div class='row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-5'>
 			<div>
 				<p>Age of Ultron Wanda</p>
-				<img src='https://laurenacton.github.io/img/aouwanda.jpg' alt='Age of Ultron Wanda'
+				<img src='../img/aouwanda.jpg' alt='Age of Ultron Wanda'
 					width='150px' />
 			</div>
 			<div>
 				<p>Anti Venom</p>
-				<img src='https://laurenacton.github.io/img/antivenom.jpg' alt='Anti Venom'
+				<img src='../img/antivenom.jpg' alt='Anti Venom'
 					width='150px' />
 			</div>
 			<div>
 				<p>Integrated Spiderman Suit</p>
-				<img src='https://laurenacton.github.io/img/spidey.jpg' alt='Integrated Spiderman Suit'
+				<img src='../img/spidey.jpg' alt='Integrated Spiderman Suit'
 					width='150px' />
 			</div>
 			<div>
 				<p>Halloween Wanda</p>
-				<img src='https://laurenacton.github.io/img/halwanda.jpg' alt='Halloween Wanda'
+				<img src='../img/halwanda.jpg' alt='Halloween Wanda'
 					width='150px' />
 			</div>
 			<div>
 				<p>The Scarlet Witch</p>
-				<img src='https://laurenacton.github.io/img/floatwanda.jpg' alt='The Scarlet Witch'
+				<img src='../img/floatwanda.jpg' alt='The Scarlet Witch'
 					width='150px' />
 			</div>
 			<div>
 				<p>Kate Bishop and Lucky the Dog</p>
-				<img src='https://laurenacton.github.io/img/katebishop.jpg'
+				<img src='../img/katebishop.jpg'
 					alt='Kate Bishop and Lucky the Dog' width='150px' />
 			</div>
 			<div>
 				<p>Yelena</p>
-				<img src='https://laurenacton.github.io/img/yelena.jpg' alt='Yelena' width='150px' />
+				<img src='../img/yelena.jpg' alt='Yelena' width='150px' />
 			</div>
 			<div>
 				<p>Civil War Wanda</p>
-				<img src='https://laurenacton.github.io/img/cwwanda.jpg' alt='Civil War Wanda'
+				<img src='../img/cwwanda.jpg' alt='Civil War Wanda'
 					width='150px' />
 			</div>
 		</div>
 	</div>
 </body>
 
-</html>
+</html>

vue/components/FunkoCard.js

@@ -4,7 +4,7 @@ export default {
 	},
 	template: `
 		<div class="card text-center">
-			<img class='card-img-top' :src="'https://laurenacton.github.io/img/' + funko.img + '.jpg'" :alt="funko.name" width="150" />
+			<img class='card-img-top' :src="'../img/' + funko.img + '.jpg'" :alt="funko.name" width="150" />
 			<div class="card-header">
 				<p v-html="funko.title"></p>
 			</div>