1

I'm trying to feed image path through property path and render it. I have many images and I want to set the image in runtime so I cannot use pre import the image prior to rendering. But the image does not show.

Error: cannot find module (but path is correct) but when I replace the varible path to actual path as var imageName = require('./Assets/profpicjpg.jpg').default; then image shows up, but I wanna use the variable path to feed the variable path data

Rendering this

import Profpic1 from './Components/Public-page/Profile-card';
function App() {
  
  return (

    
    <div className="App">
      
    <Profpic1
        path = './Assets/profpicjpg.jpg'
      />
    </div>
  )
}

export default App;

Function (this is in a different page)

export default function Profpic1 ({path})
  {
      
    var imageName = require(path).default;
    return ( 
<div>
   
   <img src={imageName} />
    </div>
 )}
Pretty_Girl
  • 197
  • 1
  • 2
  • 10
  • All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a
    or a . So use `Profpic1 ` instead of `profpic1 `
     – kiranvj Jan 08 '21 at 05:12
  • @kiranvj now an error pops up `cannot find module`. but when I replace the varible `path` to actual path as `var imageName = require('./Assets/profpicjpg.jpg').default`; then image shows up, but I wanna use the variable `path` to feed the variable path data. – Pretty_Girl Jan 08 '21 at 05:28
  • 2
    [This will help](https://stackoverflow.com/a/33917557/7704650) – emkarachchi Jan 08 '21 at 05:46
  • Can you move the assets folder to `public` folder and access the image like `` . Path in this case will be `/Assets/profpicjpg.jpg` . `./` changed to `/` – kiranvj Jan 08 '21 at 06:33
  • @kiranvj Then an error pops up `./src/Components/Public-page/Assets/profpicjpg.jpg Error: ENOENT: no such file or directory` – Pretty_Girl Jan 08 '21 at 07:08
  • Move assets folder to `/public/Assets` public folder will be outside `src`. Refer image like `/Assets/profpicjpg.jpg` in your component – kiranvj Jan 08 '21 at 13:08

0 Answers0