I created a ReactJS project based on a tutorial useng NextJS. When running locally, the logo image on the top left corner render perfectly. However, in production, after deploying in Netlify or Vercel, The logo on top left corner do not render.
I researched and found that tere is an issue related to NextJS image rendering. However I could not fix it on my onw project.
The logo is located on the component Navbar.jsx
line 55:
<Link>
<Image
src='/../public/assets/navLogo.png'
alt='/'
width={125}
height={50}
/>
</Link>
vercel (production):
https://portfolio-next-js-tiagoc0sta.vercel.app/
git repo:
https://github.com/tiagoc0sta/portfolio-next-js.git
I finally checked your package.json file and realized you're using next v13. It is now using a new next image component with different styling than in previous version. I suggest you check the official documentation on vercel page.
But to test it out, edit your code like this:
<div style={{position:"relative", height:"200px", width:"280px"}}>
<Image src={source} alt="" fill style={{objectFit:"cover"}}/>
</div>
Make sure that the images' parent div is relatively positioned and has some dimensions set.
Related
I just upgraded my React version to 17.0.2.
Unfortunately, some of my code is not working. Image is not displayed.
This code is one of IMG tag in jSX, and what I did is set 'Src' path dynamically.
It was working without any issue on my previous React version.
Is there any solution to fix this issue?
<img src={require(`../${config.path}/${config.icon}`)} alt='App Icon' />
In React.js latest version v17.x, we can not require the local image we have to import it.
like we use to do before
require(`../../${config.icon}`);
Now we have to you have to put all your images into public folder and then
<img src={`../${config.icon}`}></img>
this method will work.
I am using Nextjs with typescript. I am trying to use the image component with the placeholder prop. But I keep on getting an error.
My code >
import bgSell from '../../public/assets/bgSell.jpg';
<Image
layout="fill"
src={bgSell}
className="z-0 absolute top-0 left-0 min-h-full min-w-full object-cover"
placeholder="blur"
/>
I think I need to do some configuration in webpack maybe?
I checkout their git repo example and everything works fine but they are using javascript.
Here is the link of the example from next.js
https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/placeholder.js
Any help would be awesome!
Yeap I found the issue. I was using nextjs version 10. I upgraded my version to 11 and everything works fine now :)
I'm using a bootstrap theme into ReactJS app. Everything works except the NavBar transition/animation effect on scrolling isn't working. I have noticed in the projects GitHub they are using a script. They are referring this script in the index.html page (the last line within the body tag).
Now, I'm trying to get it working in my ReactJS app but without luck so far. I've created a navbar component and imported into App.JS. I've used same id, "mainNav" for the tag with in my navbar component, but I've noticed that an error in the script. It says "undefined is not an object(evaluating '$("#mainNav").offset().top > 100)' in the browser.
Could you please point me what I'm doing wrong? How can I get the same effect using ReactJS?
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
I am trying to implement this in a React Electron app. I've tried using the CSS properties as listed above, but it is not working yet. The other solution with the browser window doesn't quite work either as my application is in React with the App wrapped in a Context.Provider. Here is the code I have:
In app.tsx
<ApplicationContext.Provider value={{
...this.state,
}}
>
<div id="app" className={appTheme}>
<header className="title-bar">
{/* more code */}
</header>
</div>
And this in App.scss
.title-bar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
Anyone know if there is a better strategy for solving this in a React Electron app?
llamacorn -webkit-app-region: drag is known to have problems while the developer tools are open. See this GitHub issue for more information including a workaround. https://github.com/electron/electron/issues/3647
Source: https://www.electronjs.org/docs/api/frameless-window
Ok, I'm not sure why I am getting this behavior, but in case this helps others I'll just post what I did to resolve my issue.
I was running Electron 5, I upgraded to the latest version v7 on the project, and globally on my machine. Additionally, the Electron window would launch with a Chrome dev tools window docked to the right of the app. When I closed that, I was able to drag the window. I was able able to undock the dev tools, and that also allowed the window to be draggable.