Import img with variable as src not working as expecteed #28399
Unanswered
Hachondeoro
asked this question in
Help
Replies: 1 comment
-
webpack has to know about a path ahead of time in order to require it. The main way to get around this to use require.context. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Description
I'm just trying to import a simple img from a path in my json file.
Steps to reproduce
Link to repository
When I'm using
The image gets imported and rendered as expected. But when I try to import the image with a variable as a path:
<img alt="..." className="img" src={require(`${props.image}`)} />
I get an error similar to:
Error: Cannot find module 'assets/images/accomodation-room1.png'
This happens even if I use
assets/images/todd-logo.svg
as the variable value in the json file, in the same js file I'm working on. This problem arises when I use a variable as a path.I have added a jsconfig.json with the following parameters to deal with paths in my project, while using the plugin 'gatsby-plugin-resolve-src':
Expected result
The image gets rendered in the website
Actual result
I get an error saying
Cannot find module
Environment
System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 15.2.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.9.0
Browsers:
Chrome: 87.0.4280.66
Edge: Spartan (44.19041.423.0), Chromium (87.0.664.47)
npmPackages:
gatsby: ^2.26.1 => 2.26.1
gatsby-image: ^2.5.0 => 2.5.0
gatsby-plugin-manifest: ^2.6.1 => 2.6.1
gatsby-plugin-offline: ^3.4.0 => 3.4.0
gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0
gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0
gatsby-plugin-sass: ^2.6.0 => 2.6.0
gatsby-plugin-sharp: ^2.8.0 => 2.8.0
gatsby-source-filesystem: ^2.5.0 => 2.5.0
gatsby-transformer-sharp: ^2.6.0 => 2.6.0
npmGlobalPackages:
gatsby-cli: 2.13.1
Beta Was this translation helpful? Give feedback.
All reactions