get Parcel to render images correctly

Grace-00 · Dec 22, 2022 · 2ec5c74 · 2ec5c74
1 parent 64ee97b
commit 2ec5c74
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@ dist/
 .vscode/
 src/design/
 src/images/
+static/
 TODO.md
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,4 @@
+{
+    "extends": "@parcel/config-default",
+    "reporters":  ["...", "parcel-reporter-static-files-copy"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@parcel/config-default": "^2.8.2",
+    "@types/node": "^18.11.17",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/redux-logger": "^3.0.9",
@@ -25,6 +27,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-typescript": "^0.14.0",
     "parcel": "^2.8.0",
+    "parcel-reporter-static-files-copy": "^1.4.0",
     "prettier": "^2.8.0",
     "process": "^0.11.10",
     "redux-devtools-extension": "^2.13.9"

diff --git a/src/components/User.tsx b/src/components/User.tsx
@@ -7,7 +7,10 @@ interface UserProps {
 
 const User = (props: UserProps) => {
   return (
-    <div>{props.user.username}</div>
+    <div>
+      <img src={`./image-${props.user.username}.png`} alt={props.user.username}/>
+      {props.user.username}
+    </div>
   )
 }