[Canary] Img: passing src from prop breaks component - babel plugin not installed/recognized

[Vincent-3DAT]

The following works for me on latest canary:

import overwatch from './images/overwatch.png'

<Img src={poster.background as any} />

however if i want to wrap it in another component and feed it a src

 const ImageWrapper = ({ src }) => {
   return <Img src={src}></Img>
 }

this breaks with the following message.

Babel plugin 'react-optimized-image/plugin' not installed or this component could not be recognized by it.

So it looks like i can not wrap the component, ok not that big of a deal.

But if I want to do something like this:

import overwatch from './images/overwatch.png'
import codmw from './images/codmw.png'
....
const posters = [
 {
    game: 'overwatch',
    background: overwatch,
  },
  {
    game: 'codmw',
    background: codmw,
  },
]
....
{posters.map((poster) => {
            return (
              <Img src={poster.background as any} />
            )
})}

Now it is a problem, i can not loop the Img component, is this not possible with this component or am i doing something wrong?

[stoil]

Yeah, it happens on my end as well. I wanted to make a LazyLoaded Component which wraps the Img component provided by the react-optimized-image package and adds some lazy loading functionality but... no luck so far.

@cyrilwanner any thoughts about that?

[cyrilwanner]

Yes, I am afraid that this (wrapping & looping) is not possible with the current canary version. But I will try supporting that use case.

@stoil If you design your component with a similar API like next/link, it should work. E.g. if you use it like this, the babel plugin should correctly recognize it. But I am not sure if that API will suit your use-case with lazy loading as you probably need a reference of the actual img tag.

<LazyLoad>
  <Img src={require('./image.jpg')} />
</LazyLoad>

But as written above, I'll try to support normal wrapping as well, it's just not yet in the current canary version.

[brandonpittman]

@cyrilwanner It worked on v5. I was pretty happy with that release. Reinstalled on a different machine and it all broke again. 😢

[cyrilwanner]

@brandonpittman which part worked on v5 (I guess you mean canary-5)? The issues mentioned here shouldn't have worked in any canary version 😅

[brandonpittman]

@brandonpittman Maybe it's an unrelated bug, but I was using a loop to render images with a dynamic src and on the day you updated to canary-5, all was well. After installing v-10, I'm getting the same error as the OP. Removing said dynamic loop made the build work again.

ref: https://github.com/brandonpittman/next-blog/blob/master/src/components/media_card.js

[thedevdavid]

@cyrilwanner hey! What do you think about this dynamic loading issue? Because right now, it isn't working for ex. when rendering blogposts. I'm happy to contribute if it isn't resolved wight now, and if you can help me with any idea, where should I look for this bug.

[FernandoChu]

Would like to contribute on this too, not experienced with babel so if you can tell us your thoughts it might gives us a headstart on solving this problem @cyrilwanner

[nicholaschiang]

Related to cyrilwanner/react-optimized-image#6.

[bh]

Fixed it by adding rawSrc to <Img/>

Example:

    const foo = require(`../../public/assets/blog/${src}`);

    <Img
      src={foo}
      rawSrc={{
        fallback: {
          original: {
            1: require(`../../public/assets/blog/${src}?url`),
          },
        },
      }}/>

Ref: https://github.com/cyrilwanner/react-optimized-image/blob/e27a012211bcf8d916007933d241de926f1158e2/tests/unit/plugin/fixtures/component-resolve/object-spread-component-require/output.js#L14

yarn next build workes well. .... But the generated HTML is a simple <img/> element.

I think the issue is, that https://github.com/cyrilwanner/react-optimized-image/blob/e27a012211bcf8d916007933d241de926f1158e2/src/plugin/transform/img.ts#L200 will not be called while compiling.

[Santhosh-Umapathi]

I was able to use the img src as prop by using switch case statement and creating <Img /> for each case with different sources