I am trying to dynamically load images in a map function but it won't return anything.
I can get it to load a single image if I import it at the top of the page and hardcode the src but I have tried every solution I can find to do it dynamically and none of them work.
Here is what the code looks like. I am passing props with the title of the PNGs but nothing will load.
const Project = (props) => {
const proj = props.proj
return (
<div >
{proj.map(({title, id}) =>{
return(
<div>
<div className="..." key={id}>
<img
src={require(`../Assets/${title}.png`).default}
alt={`Image of ${title} hompage`}
className='object-cover'
/>
</div>
</div>
)
})}
</div>
)
}
export default Project;
The app was set up with create react app. I tried setting up a library but it didn't load the images either.
Related
I'm making a netflix clone. I'm fetching and displaying data from the TMDB API. Now, I'd like to show a skeleton component while the images are being rendered. Ideally, that would look something like this:
I'm using the react-lazyload package (https://www.npmjs.com/package/react-lazyload) to lazy load the images. The problem is, it doesn't display the skeleton component as the placeholder, while the images are being rendered. This is what I'm currently getting:
The code:
return (
<div className="row">
<h2>{this.props.title}</h2>
<div className="row_posters">
{this.state.movies && this.state.movies.map(movie => (
<LazyLoad key={movie.id} className="poster_container" placeholder={<SkeletonPoster key={movie.id}/>} offset={200}>
<img
key={movie.id}
className="poster"
src={`${this.baseUrl}${movie.poster_path}`}
alt={movie.name}
/>
</LazyLoad>
))}
</div>
</div>
)
How do I get the skeleton component to be shown while the image renders?
I want to import image from other component but Why it's not show. in
Data.js I'm showing the image path. but when I want it . it's not show
in HOME. but Without Image Everything is work properly
Data.js
export const HomeObject = {
id: 'about',
img: require('../../Images/sv-1.svg'),
alt:'CAR',
}
Home.jsx
const Info = ({img, alt}) => {
return (
<Img src={img} alt={alt} />
)
React img works similar to html img tag. pass file path as src value to show the image.
when passing image src as prop to the component, keep in mind that it needs to be a string value. not require('...') value.
const Parent = () => {
return (<Info img={'../../Images/sv-1.svg'} alt={'info image'}>
};
const Info = ({img, alt}) => {
return (
<Img src={img} alt={alt} />
);
}
this works fine in local setup. but, when you deploy the application, serve the image as static resource and use it.
I'm working on a photo sharing app using reactJ hosted on AWS.
Everything works fine but I'm struggling to have some style for images.
Basically I have this piece of code
const PhotosList = React.memo((props) => {
const PhotoItems = (props) => {
return props.photos.map(photo => {
return (
<S3Image
key={photo.thumbnail.key}
imgKey={'resized/' + photo.thumbnail.key.replace(/.+resized\//, '')}
level="private"
/>
)
}
);
}
return (
<div>
<Divider hidden />
<PhotoItems photos={props.photos} />
</div>
);
})
What I'm trying to do is to use Card component from react semantic-ui to display pictures from S3 and I have no idea how to do it.
I was thinking to have something like from s3image to store values into a map and then iterate over and display the image using Card component. I don't know if this is possible and if so, how to do it.
I appreciate any help.
Thanks.
C.C.
if you pass an array of s3 images source as a props you can use the card component like this:
const PhotosList = React.memo(props => {
return props.photos.map(photo => (
<Card>
<Image src={photo} wrapped ui={false} />
</Card>
))
})
If you need the card to be of same height use the cards element instead to group them together.
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);
I'm trying to load images based on a dynamic path in react but the result is the following error Cannot find module <path>
The following code is working
const TestImage = () => {
return (
<div className="image-wrapper">
<img src={require('./../../../assets/images/guy-holding-pencil.jpg')} />
</div>
);
};
I broke down the dynamic part to the use of a variable which is not working
const TestImage = () => {
const image = './../../../assets/images/guy-holding-pencil.jpg';
return (
<div className="image-wrapper">
<img src={require(`${image}`)} />
</div>
);
};
The path is correct. The only difference is the variable. The result:
Error: Cannot find module './../../../assets/images/guy-holding-pencil.jpg'.
Edit: My project is created with create-react-app
How about this approach ?
import IMAGE1 from './../../../assets/images/guy-holding-pencil.jpg';
Then
const TestImage = () => {
return (
<div className="image-wrapper">
<img src={IMAGE1} />
</div>
);
};
In some case you can use command require, because exists deffer between relative and absolute path.
I try go to npmj org and find dropzone plugin for solving this problem