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 :)
Related
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.
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 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.
I have a problem with images in create react app i can not use "webpack import" way of including images because i am uploading them and then i want to show them.
my code of img is simple
<img src={file.path} alt={title}/>
which gets rendered as:
<img src="/public/cdn/files/offer_photo/a70318372a62066c492b4ebdd34491af8bd9bb15.jpg" alt="rez5d9e85_id20150826_036" class="MuiGridListTile-imgFullHeight-620">
as per docs in development i should use /public folder to let webpack server to server it. But it seems it doesn't
the file is in place
i have tried to add process.env.PUBLIC_URL pre-fix to dynamically added img src ..did not helped.
Thank you in advance for any suggestion how to solve this issue.
have you tried to assign the import of the image to a variable? example
const image = require ('path to image')
and then:
<img src={image} />
I'm learning to build static sites using Gatsby v2 and encountering a problem:
When I try to import a logo.svg file from the images folder, it does not work. (See attached screenshot)
I checked in the console, it says the logo is defined but never used? I'm not too sure what exactly i did wrong here. Any pointers would be great!
Your JSX syntax is wrong. It has to be <img src={logo} /> without the double quotes. Have a look at the React docs if that is unclear to you :)