score:1
Accepted answer
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);
Source: stackoverflow.com
Related Query
- Unable to load images dynamically in react app
- dynamically load images with react
- React app is unable to handle svg images on Windows only
- How to load JSON file dynamically on react app
- Unable to add new key-value pair dynamically to a STATE JSON Array in React App
- How to Dynamically Load in React Images
- React app load public images in live but not in localhost
- Currently unable to display svg images from API in React app
- React Load Images and Dynamically Display in Component
- How to load images dynamically in react using a Collage component
- React won't load local images
- Dynamically Add Images React Webpack
- Nextjs: Unable to load images from static folder
- Dynamically load a stylesheet with React
- How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?
- "Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR" for React app after upgrading to Visual Studio 2019 16.10.0
- React router not allowing images to load
- create react app - without typescript , got Error: Failed to load parser '@typescript-eslint/parser'
- how to load React app / Lib inside ExtJs Component
- How to load the google maps api <script> in my react app only when it is required?
- Dynamically load redux reducers with react router 4
- create react app not loading css background images in dev or build
- Cant load a react app after starting server
- React Native local images load slowly
- Unable to use React.memo in React Native app
- Extract CSS from SCSS and deferred lazy load in React app
- React app with Server-side rendering crashes with load
- React Router doesn't load images properly with nested routes
- Dynamically load a React component/bundle from external source
- How to load background images from css in React and NextJS
More Query from same tag
- Reactjs - How can I create a Boolean based off a successful axios POST?
- reset form.fields in antd reactjs
- ReactJs/Redux Invariant Violation: Could not find "store" in either the context or props of "Connect(LoginContainer)"
- How do I output the data received through Redux Thunk?
- Gatsby - GraphQL image undefined
- React - 'react-d3-graph' not rendering Chart component
- Header div stays at top, vertical scrolling div below with scrollbar only attached body
- Pass value from Timer to its Parent in React
- How to populate bootstrap grids with JSON data obtained from fetch() in Reactjs?
- Error on creating onKeyPress "Enter" ReactJS
- How to get a small thumbnail of a webpage link inside html
- Reactjs application build to auto run locally
- Comparison based on valid string combination in javascript
- How do I generate React Kendo <GridColumn /> dynamically?
- Compare form component values
- react link send props
- Typescript - Setting the type for a null property, when defining the initial state in Redux
- How can I reduce width and height of my dateTimePicker?
- How to stay Focus in react js?
- React useEffect hook is causing infinite loop
- How to pass async props from parent-component to child-component in React
- How to call from C# to CEFSharp that run a web page using react
- Return a promise for a simple action creator in react using react-redux
- How can I get DateRangePicker to render calendars on click?
- ReactJS: How to filter an array in JavaScript to show specific image on map
- I'm trying to set up a form's success state
- How to target a nested class in a different sheet with JSS?
- Reactjs promise.all order of calls
- Is it possible to Change Ant designs theme as dynamic
- My repository is using CI/CD, but I have this error. How can I fix it?