images

[klimczk1]

trafficstars

In the newest version of library is a problem with using images. There is something wrong with import path. import google from './assets/google.jpg' but using import google from '/../assets/google.jpg' is all right. This behaviour is bug for me, but maybe I am wrong ;)

[GarrettSYHampton]

Just spent the last few days going crazy over this too. Images were working for months, then just recently stopped. Changing their path worked for me too. Removing the "./" on the import worked for me.

[xfishernet]

same error :-(

[bobbyflowstate]

This is also broken for me :(. Removing ./ worked for me as well, but this isn't great considering I'd like to keep my assets in a single folder. What about fonts as well?

[bobbyflowstate]

By the way I also had to add declare module '*.png'; to my typings.d.ts file as I'm using Typescript.

[bobbyflowstate]

Sry don't mean to spam. But I've now changed it to import logo from '/../assets/logo.png'; and it works. Basically the path can't start with a dot? Seems like a bug to me. Or it should be strongly documented so people don't spend hours dealing with this.

[azimqordoba]

Any solution for this issue ? the /../ works but breaks storybook giving an error like : Module not found: Error: You attempted to import /../../assets/image.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported

[Duncan-Alexander-Coutts]

Same here, taking away the dot works. This does seem like a bug though, at least it should have been highlighted as a breaking change.

For me (create-create-lib) however, even when removing the dot my unit tests fail as they want the dot to be there...Presumably because they work via react-scripts and not micro-bundle. Therefore I have had to disable my unit test for that component.

[sudobhat]

Same here. Spent a couple of hours looking at what went wrong. But, paths starting with ./ does not work!

It seems like a bug!

[kishan-tocca]

facing same issue

[SivaGanesh56]

any workaround ?

[SivaGanesh56]

@transitive-bullshit need ur input on this

[prasadrails]

Hi @SivaGanesh56, I have followed one approach

1. Created 'types/images.d.ts' file with following content.

   /// declare module '*.png'{ const src: string; export default src; }

2. Go to tsconfig.json" paste inside compiler options "typeRoots" : ["node_modules/@types", "src/types"]

3. Go to component file where you want load image ex: Header import brandLogo from "/../assets/logo.png"; "<\ img src={brandLogo} alt="logo" />"

Thanks, Durga Prasad.

[woowalker]

mark

[dej611]

Sry don't mean to spam. But I've now changed it to import logo from '/../assets/logo.png'; and it works. Basically the path can't start with a dot? Seems like a bug to me. Or it should be strongly documented so people don't spend hours dealing with this.

Just used this and it worked. My only problem was with Jest, which wasn't finding the assets correctly.

In my case for SVGs I just appended this to my package.json to make it work:

"jest": {
    "moduleNameMapper": {
      "/../(.*).svg$": "<rootDir>/path/to/$1.svg",
      "/./(.*).svg$": "<rootDir>/another/path/to/$1.svg"
    }
  }

Still a monkeypatch waiting for the final fix on the bundler side, but I hope helpful for others who want to tests. :)

[theIYD]

Jest fails to recognise the path like import logo from assets/logo.png where logo.png is located at src/assets.

@dej611 solution works fine. Thanks!

[Lionardo]

What is the status on this? I can't import any image with any of the solutions mentioned above. create-react-library version 3.1.1 EDIT it works for me if I import like this import vector from 'assets/vector.svg'