score:1
Accepted answer
See my pull request here. Because webpack needs to know all your dependencies at build time, it's not possible to use require in a dynamic context. Use require.context()
to build a context of all your images, and then reference them using that context.
First, change your references to use ./
instead (As because we're loading that folder into context, that essentially becomes the root ./
):
{
"id": 100,
"title": "Kingsglaive",
...
"imageUrl": "./Kingsglaive_Final_Fantasy_XV.jpg"
},
And then in your movie card, create the context. (React will read through the folder at build time, and then give you the ability to access them using the context created):
const movieImages = require.context("../images/", true, /\.jpg$/);
const MovieCard = (props) => {
return (
...
<img className="card-img-top" src={movieImages(props.movie.imageUrl)} alt="" />
)
}
Source: stackoverflow.com
Related Query
- Module image not found React Redux
- Webpack + React + TypeScript: Module not found ... in ... node_modules/react/
- React unable to import component -- module not found
- Firebase-Admin, importing it to react application throws Module not found error
- Module not found error using Yarn 2 to link React components
- How to create React App including Web3 using create-react-app? I am getting Module not found Error. BREAKING CHANGE: webpack < 5 used
- how to solve the error that fs module is not found when used react and next.js
- React - jquery module not found
- React js - Unable to use react-icons, Module not found '../lib'
- React module not found - how to import modules in react
- react compile error, Module not found
- Module not found in React
- Module not found: Can't resolve '../images/bg-header-desktop.svg' when importing image into React project
- Webpack and React Image Not Found
- React & Node (Multer): Image is not found by path while it exists on that path
- Babel-loaders module not found in npm start with react js
- Jest react ionic app - @ionic/storage module not found
- Module not found in npm own package with React
- while compiling my react project am facing the issue with module not found
- Module not found on SVG files in react
- RollupJS ES6 module can't get imported because of default not found for redux and redux-form
- React | Can“t load Images > Module not found
- Dynamic image src used in React component with webpack not found
- React, Node, Mongodb : My image file is not being served from backend and trying to render it on the React side throws 404 not found
- Module not found - React
- after i installed npm on my visual studio terminal to create react js app, when i node start the server its display error: module not found
- I am getting /bin/sh: [npm: not found error while executing the react image in Docker
- Usage of Firestore in React doesn't work - Module not found
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- React Native: JAVA_HOME is not set and no 'java' command could be found in your PATH
More Query from same tag
- Scroll event getting fired on top element as well as on the bottom element
- React Material-UI Select using an array of objects as the source
- Using onProgress in react-scroll-trigger
- React state gets "corrupted"
- react-bootstrap Accordion not loading
- Iterating through Mongo Collection Using NodeJS and Axios
- Missing a step to update a static ReactJS site on GCloud
- React how to create sub pages with react router to display?
- How to get correct MouseHover Coordinates on datamaps
- Populate CheckboxList Based on URL Parameters
- ReactDOM.createRoot can't mount the component into DOM
- Programmatically clear/reset React-Select label in multi mode?
- React: How to refresh a component with onClick using hooks
- How to change a className of a particular element based off it's child input value and input dataset comparison?
- Changing background Image based on Route in React
- Highlight matched letters/words in a search list using ReactJs
- Render only the next unfilled form component in React
- Nginx config to serve react app from sub-folder
- Typescript Declaration File working with generics and merged objects
- React ReferenceError:unknown node of type "JSXSpreadChild" with constructor "Node"
- React - Parcel - build failed. Error: Could not resolve module "self-published/parcel-swc.darwin-x64.node"
- Custom react hook with useState always resetting to its initial value
- How to remove the arrows icons from a Material UI TextField
- Manually refresh react-query onClick with React
- How can we import the image from one js file to another js file
- How to update data in the child component by click event in the parent component
- NextJS: use a custom server (NestJS) to render specific pages
- Is componentDidMount of parent called after all componentDidMount of children?
- Using variable in setState - react
- React CSSTransition when you change page by Route