score:1
Accepted answer
you are using "require" in order to import your image file.
this will not work in a react app, at least not out of the box.
i understand what you're trying to do, i think that a better solution for that will be to use a custom react hook to import your image. like this:
function usedynamicsvgimport(name, options = {}) {
const importediconref = useref();
const [loading, setloading] = usestate(false);
const [error, seterror] = usestate();
const { oncompleted, onerror } = options;
useeffect(() => {
setloading(true);
const importicon = async () => {
try {
importediconref.current = (
await import(`./${name}.svg`)
).reactcomponent;
if (oncompleted) {
oncompleted(name, importediconref.current);
}
} catch (err) {
if (onerror) {
onerror(err);
}
seterror(err);
} finally {
setloading(false);
}
};
importicon();
}, [name, oncompleted, onerror]);
return { error, loading, svgicon: importediconref.current };
}
Source: stackoverflow.com
Related Query
- Im having troubles importing an img using a local data.json file which has a path object (REACT)
- How to get data from local json file using actions and axios.get() (Redux)?
- Fetching data from local JSON file using axios and displaying data
- loading json data from local file into React JS
- Unable to fetch data from local json file by axios
- How to write data to JSON file while using Reactjs
- Reading data from JSON file using react
- React - how to populate one select menu based on a value of another select menu using data from a local .json file
- Fetching data from local json file
- Django-rest framework, React JS, Axios- Post JSON data which contains image file
- React Hook useEffect to fetch data from local json file to create a details page
- Having issues using axios to handle my JSON data
- Local json file is not loading using ajax in react js
- How can I read the data in the excel file with reactjs or javascript using the path to the file
- Fetch data from JSON local file in React
- save image from local directory(not uploading) by Converting base64 data uri to file object using form data
- Writing data from form to local JSON file with React
- Importing css file in jsx using relative path
- How do I refer to a local data file using useEffect() in a create-react-app React project?
- JSON data from S3 text file using React
- Display data from a local JSON file
- how to read data from json file an plot it in kepler.gl using React
- fetching json data from local file
- how to fetch json data from local file in redux by action
- React: Trying to set state via useEffect using local JSON data
- What is the correct syntax inside the src property in a img tag for a mapped json file using ReactJS?
- How to know which file has been uploaded from multiple inputs of type file in reactjs using Express API
- Mapping through local JSON file with large data in react takes some time to load. How to fix it?
- Gatsby/GraphQL using StaticQuery to retrieve local json data returns a null array first then my data
- Load Json data from local file into Typescript variable in REACT
More Query from same tag
- Getting the value of a checkbox inside another component when a button is clicked
- React JS - Link with data-toggle doesn't redirect to url
- React: Execute some check before render
- PayPal Smart Payment Buttons using old State
- Send multiple axios requests in a for loop in series (One after the other)
- Loop through Array of object with the same data on some object and get it displayed once
- Running react-snap on AWS codebuild
- In TSX file : Property 'createRef' does not exist on type 'typeof React'
- Working with component state or props inside Redux mapDispatchToProps
- React: Calling setState within render method throws error
- React js: Image upload is not working in CKEditor
- react-i18next giving a missingKey error in build only
- How do I switch from npm to yarn in my project?
- React/Jest/MSW Wait for response throws errors using act()
- Docker fails to build - Create React App + Tailwind /bin/sh: craco: not found
- React redux - actions
- CSS not rendering as expected
- Audio player (Reactjs): how to update parent state with a property of child on click
- React: image loading but not displaying
- Can't get multiple data from API using foreach loop with Fetch API get request
- antd Table Summary
- Pushing dynamic state update in a child component to a parent component
- webpack bundle throws error on IE11 because of just one node package 'crypto-js'
- How can I change the color of the ANT Design's Spin component?
- Updating an object with setState in React (solidity event filter)
- React communicate between component
- How to use redux saga in editable table efficiently
- React 16: access context from outside of function component
- Set default value to filter
- How to 'defaultProps' when some fields are required?