Currently I'm using NextJs as my frontend and Strapi as my CMS for my web application. I've added the following data to my Citizenship collection type in Strapi:
This is my code in the NextJs side:
export default function Citizenship({ posts }) {
return (
<>
<div style={{textAlign:"center", marginTop:"20px", fontSize:"25px", color:"#0E2043", fontWeight: "500"}}>CITIZENSHIP</div>
<div class="flexbox-container" style={{margin:"70px", marginTop:"0px"}}>
{
posts &&
posts.map((post) => (
<div style={{ padding: "40px" }}>
<div class="citizen-item" key={post.id}>
<div className="container6">
<img
style={{ height: "50%", width: "100%" }}
src={post.Thumbnail.name}
/>
<div style={{textAlign:"center", color:"#E3AB50", padding:"10px", fontSize:"20px"}}>{post.Title}</div>
<div style={{textAlign:"center", color:"#000", padding:"10px", fontSize:"15px"}}>Access to {post.Countries} countries</div>
<div style={{display:"flex", justifyContent:"center", paddingTop:"20px", paddingBottom:"10px"}}>
<button class="findButton">FIND OUT MORE</button>
</div>
</div>
</div>
</div>
))}
</div>
</>
)
}
export async function getStaticProps() {
const res = await fetch('http://localhost:1337/citizenships');
const posts = await res.json();
return {
props: {posts},
}
}
In my output, everything is coming fine except for the Image where it is only showing my first image and all the others are giving a 404. How do I fix this?
Use console.log(post) and find what your post returns in your browser console . If it gives Thumbnail then use it .Or else use what it gives .
use postman for that route with populate query (at the end add "?populate=*") and u will get the complete position of the url of you image and use it .
Related
Have an issue with react-image-crop. If I change the crop, it works perfectly, but if I just load and then hit save, I get an empty image back. At first I thought maybe its just not loading it, but I can see the croped image on load. And I don't get an "undefined" image back, I get an image with no data in it.
This is how I read the image:
useEffect(() => {
console.log("Got completed crop")
const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement
if (canvas) {
console.log("Got canvas")
console.log(canvas.toDataURL())
setCroppedImgUrl(canvas.toDataURL())
} else {
}
}, [completedCrop])
This code gets called every time completedCrop is updated, and I can see that it works when the image is first loaded, BUT, the image it returns on load (independent on what image I am cropping) is
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABGJJREFUeF7t1AEJAAAMAsHZv/RyPNwSyDncOQIECEQEFskpJgECBM5geQICBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAgQdWMQCX4yW9owAAAABJRU5ErkJggg==
To initiate the crop, I use the following code:
<div className='d-flex align-items-center gap-4'>
<div className='text-center'>
<p>Crop:</p>
{Boolean(posterSrc) && (
<ReactCrop
crop={crop}
onChange={(_, percentCrop) => {
setCrop(percentCrop)
}}
onComplete={(crop) => setCompletedCrop(crop)}
aspect={aspect}>
<img
style={{maxHeight: previewHeight, maxWidth: previewWidth, objectFit: "cover"}}
ref={imgRef}
alt="Crop me"
src={posterSrc}
onLoad={onImageLoad}/>
</ReactCrop>
)}
</div>
<div className='text-center'>
<p>Preview:</p>
{Boolean(completedCrop) && (
<canvas
id='canvas'
ref={previewCanvasRef}
style={{
objectFit: 'contain',
width: previewWidth,
height: previewHeight,
}}
/>
)}
</div>
</div>
Anyone have any idea what I'm doing so wrong
I was wondering is it possible to show couple images on single preview of ANTD carousel.
For insrance i have a carousel on which i may have different amount of immages.
The problem is that i want to show all avaliable images in preview without heving to schroll through them.
I tried to change size of immages but that didn't help.
Also i haven't found any properties in ANTD for that.
Does anyone know is it possible?
import { Carousel } from 'antd';
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
ReactDOM.render(
<Carousel effect="fade">
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>,
mountNode,
);
Here's what seemed to work.
Mainly just added an extra item to my array in 0th position and conditionally rendered a preview frame which included all the images in a grid.
Sample:
const images = [...new Array(5).keys()].map((rowIndex, _, array) => {
if (rowIndex === 0) {
return (
<React.Fragment>
<div key={rowIndex} style={previewStyle}>
{array.map((colIndex) => (
<h3 key={(rowIndex + 1) * (colIndex + 1)} style={h3Style}>
Preview: {colIndex}
</h3>
))}
</div>
</React.Fragment>
);
}
return (
<React.Fragment>
<h3 key={rowIndex} style={{...h3Style, lineHeight: '160px',}}>
{rowIndex}
</h3>
</React.Fragment>
);
});
I have this component :-
const CollectionItem = ({ item }) => (
<div className='collection-item'>
<div
className='image'
style={{
backgroundImage: `url(${item.imageUrl})`
}} />
</div>
</div>
)
my images urls are like ../../assets/images/imageName.jpg
i have tried loading a an image in the css file associated with this component with this exact url. It is working with css, but not in jsx. Please help.
Generally, how you load images in react is to import the image from the specified folder (webpack converts it into the correct source behind the scenes), and then to use that imported variable as the src of the image.
import imgSource from "../../assets/images/imageName.jpg";
const CollectionItem = ({ item }) => (
<div className='collection-item'>
<div
className='image'
style={{
backgroundImage: `url(${imgSource})`
}} />
</div>
</div>
)
EDIT
In the cases where the import depends upon the props, you could simple dynamically import the image within the function itself:
const CollectionItem = ({ item }) => (
import imgSource from `${item.imageUrl}`;
<div className='collection-item'>
<div
className='image'
style={{
backgroundImage: `url(${imgSource})`
}} />
</div>
</div>
)
In the case that it does not work, you can try using require instead
const imgSource = require(item.imageUrl);
In my react app, this is an array of filenames I get from server side
const photos = ["01-1913.JPG", "01-1913.1.jpg", "01-1913.2.jpg"]
and here is how I use it with JSX
{
photos.map(entry => {
return (
<div key={entry}>
<PhotoItem key={entry} url={`${process.env.REACT_APP_NODE_SERVER}/${entry}`} />
</div>
)
})
}
const PhotoItem = (url) => {
return (
<img
src={url}
onError={this.addDefaultSrc}
alt="photoItem"
style={{
width: "500px",
height: "600px",
border: "1px solid #123C69",
}}
></img>
);
};
```
I can not figure out why I am not getting the photo (only the dummy photo from the onError event I've used) and if it has anything to do with the Object%object error. Any help would be appreciated.
As mentioned in the comments, the PhotoItem component should look like this:
// Note that here props are named "props" instead of "url"
const PhotoItem = (props) => {
return (
<img
src={props.url}
onError={this.addDefaultSrc}
alt="photoItem"
style={{
width: "500px",
height: "600px",
border: "1px solid #123C69",
}}
></img>
);
};
Note that the first argument that a react component receives is props. So even if you name it url, the value that you are looking for url lives in url.url.
I also recommend to deconstruct your props like this:
const PhotoItem = ({url}) => {
return (
<img
src={url}
...
></img>
);
};
I faced this error on the developer console on a Next.js project right after upgrading Next from v10 to v12.
Turns out using an image as <img src={require()}/> is not working anymore, and throws this error.
Instead to fix the issue, you need to use Next's (almost) drop in replacement of Image component as;
import Image from 'next/image'
...
<Image src={require()}/>
This will fix the issue, if your Next project is throwing this error.
The state
state = {
posts: [],
}
The posts gets an API value of
{
"authors": [
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
....
]
}
code
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) :
(
<div className="center">No posts to show</div>
);
return(
{postList}
)
}
The {postlist} returns objects but it returns each object in a new row in the webpage
I want all the results(images) in the same row
can anyone please help?
If you want multiple elements in the same row, you could achieve that with css. Use display: flex(by default flex-direction is row which is what you need) on the wrapper to postList. You can either pass it as a style though JSX or add a class that specifies this property
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
return(
<div style={{display: 'flex'}}>{postList}</div>
)
}
Here's a CodeSandbox sample I created using your code.
If you're trying to line up the users horizontally (from left to right), CSS is the way to go. In particular, the <div> that is being mapped has, by default, the display: block style which makes it occupy its own row in the page.
To line up divs side by side, you need to somehow apply the display: inline-block style. In my example I used a style prop, but you will likely want to do it in CSS directly.
This is a CSS problem, you should use display: flex together with flex-direction: row on the parent div which will provide the desired result.
posts.map(post,index => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authors[index].authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
Try this