Add Docusarus Image Plugin and configure the images

[lelouchB]

Docusarus provides ideal image plugin. This plugin will optimize images in the production build.

https://v2.docusaurus.io/docs/using-plugins#docusaurusplugin-ideal-image

Add this plugin and update the images in the frontend folder, specifically the images on the landing page

Here is the permalink for the code that needs to be updated

final-space-api/frontend/src/pages/Components/Body/_Card.js

Line 12 in 9a4f0d6

src={useBaseUrl(`img/${props.charName}.webp`)}

[fluentinstroll]

Hi! Can I handle this issue?

[lelouchB]

Hey @fluentinstroll
I will assign this to you.

Let me know if you have any questions.

Looking forward to your contributions.

[lelouchB]

@fluentinstroll
Any update on this ?

Just checking in.
Thanks

[fluentinstroll]

Hey @lelouchB

I should have a pull request up today for this issue.

[lelouchB]

@fluentinstroll Awesome
Looking forward to it.

[fluentinstroll]

@lelouchB

Hello! Just providing an update for you: I've been working on this for a few hours now and have hit a couple snags, I want to start by saying I'm fairly new to React and Docusaurus so I thought I'd document this in case you have any insight.

The first was when trying to use "useBaseUrl" like my below example, the tag was throwing errors.

<Image img={require(useBaseUrl(`img/${props.charName}.png`))}
                height="300px"
                alt={props.charName}
                />

Instead, I decided to go with a relative path that didn't make use of baseUrl.

<Image img={require(`../../../../static/img/${props.charName}.png`)}
                height="300px"
                alt={props.charName}
                /> 

After this, the files showed up in the build/ideal-img folder like they're supposed to:

However, again I had a "TypeError: Cannot read property 'height' of undefined' when trying to compile. I'm presuming now that this is due to how Docusaurus's "Image" class interacts with React's "IdealImage" class but I'm not sure at this moment what the solution is.

Anyway, I'm going to pick this up again in a few hours but I thought I'd jot my thoughts down here.

Thanks!

[harsh599]

Yes I have also been working on this issue parallely along with you I am also stuck at this point only having same **"height of undefined"**type error

[harsh599]

Yes I have also been working on this issue parallely along with you I am also stuck at this point only having same **"height of undefined"**type error

[lelouchB]

@harsh599 and @fluentinstroll
I understand your issue, I am exploring it.
Will get back to you on this.
Thanks

[slorber]

@harsh599 if you want me to help, please open a good bug report.

https://v2.docusaurus.io/docs/using-plugins/#docusaurusplugin-ideal-image

I don't think using dynamic require paths with template literal strings is a good idea. Try to use constant paths.

Also, I wonder if there's not a typo in our documentation. For require() calls, you should read the default export, so maybe try to add a .default at the end:

---

So instead of

<Image img={require(`./path/to/${dynamic}.png`)} />

try this:

<Image img={require('./path/to/staticImage.png').default} />

[lelouchB]

Closing this issue
Two reasons

• Images on the frontend are already in webp format
• Further investigation will be required to implement this.

Thanks @fluentinstroll