Our project relies heavily on the use of images with custom features, so we'll need to create a custom image component with the following: nextjs's image component, tracking.
New:
Out of scope, but added components playground refactor
Branches
create_custom_image_component_23
Requires
26
Potential solutions
Including Images
Option 1
Tried to create a custom images folder to store images.
Ran into issues with importing images via absolute path in the import block. Experienced loader issues with babel.
Option 2
Alternative here, would be to define*png as a custom .d.ts type.
Then, load these images into said .tsx file via a require.
This is silly and bad practice.
Option 3: SOLUTION
Rely on React's method of importing images by capitalizing on the public folder
This way, images can be included by their absolute path starting from the public folder.
No need for any form of explicit imports here.
Adding layout prop
Option 1
Tried to declare layout: string in the Prop interface.
Failed because string cannot be assigned to "fixed" | "responsive" | "intrinsic" | undefined
this is saying string is a superset of "fixed" | "responsive" | "intrinsic" | undefined, so it can't be implicitly converted to a more specific type
it's like a dog is an animal, but and animal is not a dog. An animal is a broader term that includes a cat, bird, etc
Option 2: SOLUTION
casted layout as layout?: "fixed" | "responsive" | "intrinsic"
this is good because it forces to user to supply one of the following
Additionally, realized layout doesn't necessarily always need to be supplied on declaration, so made it optional with ? syntax
added a default prop for the layout prop to be complete
Tasks
[x] incorporate next.js's image component
[x] pass in all the nextjs's image components props dynamically in our wrapper image component
Description
Our project relies heavily on the use of images with custom features, so we'll need to create a custom image component with the following: nextjs's image component,
tracking.New: Out of scope, but added components playground refactor
Branches
create_custom_image_component_23
Requires
26
Potential solutions
Including Images
Option 1
Option 2
.d.ts
type..tsx
file via a require.Option 3: SOLUTION
public
folderpublic
folder.Adding layout prop
Option 1
layout: string
in the Prop interface."fixed" | "responsive" | "intrinsic" | undefined
"fixed" | "responsive" | "intrinsic" | undefined
, so it can't be implicitly converted to a more specific typeOption 2: SOLUTION
layout
aslayout?: "fixed" | "responsive" | "intrinsic"
?
syntaxlayout
prop to be completeTasks
QA Notes
Deployment Notes
PR