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
Related
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.
Unable to render images in react, In browser console, image names are displayed correctly but on UI it is not displayed. Also, src attribute is missing from img tag after inspecting element. Please assist. Here is Sample Script
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const get_images = importAll(require.context('../../images', true, /\.(png|jpe?g|svg)$/));
const images = Object.entries(get_images).map(module => module[1].default);
return (
<div className="product">
<div>
<Row>
{products.map(product =>
<Col span={6} key={product.productId}>
<div >
<div>{console.log(product.productImageName)}
{<Image src={images[product.productImageName]} width={200}
height={200} />}
</div>
</div>
</Col>
)
}
</Row>
</div>
</div>
)
You don't need to import images. if images are part of your repository then you can use the relative path from the src directory. e.g assuming the images in under src
const path = `images/${[product.productImageName]}`;
<Image src={path} />
You should try and check if profile exist. Like this:
{profile && profile.map((...
//Or
{profile?.map((...
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 attempting to render an image using template literals, with the result of a database query used in the src of an image.
However, the template literal is being transformed into a pure string. It feels like a basic problem, but I can't figure out what I'm doing wrong.
Here's the render function in my component:
const fetchLoans = this.state.debts.map(debt => {
return (<div className="individual-loan-amount-outstanding" key={debt._id}>
<img className="individual-loan-picture" src={('../../../images/${debt.provider}.png')} alt="Provider of loan."/>
</div>
)
})
Can anyone point out where I've gone wrong? Thanks!
It could be because you aren't using backticks in the template?
<img
className="individual-loan-picture"
src={`../../../images/${debt.provider}.png`}
alt="Provider of loan."
/>
Replace ' with `:
const fetchLoans = this.state.debts.map((debt) => {
return (
<div className="individual-loan-amount-outstanding" key={debt._id}>
<img className="individual-loan-picture" src={`../../../images/${debt.provider}.png`} alt="Provider of loan." />
</div>
);
});
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);