Unable to import assets from library component into Next app

therk commented 3 years ago

Current Behavior

Image is not found

Expected Behavior

Following the instruction on "9. Shared assets library and nx.json - Nx Workspaces Course, by Nrwl" https://www.youtube.com/watch?v=LYjX2V-eQa8 The image should be found.

Steps to Reproduce

Created a test project to reproduce the issue https://github.com/therk/nx-test-next-with-assets In the test project, there is ui lib with the About component and assets folder with about.png file. In the workspace.json added the following section under build:

"assets": [
              {
                "glob": "**/*",
                "input": "libs/ui/src/assets",
                "output": "assets/ui"
              }
            ]

Int the About component, try to reference the image using: <img src="/assets/ui/about.png" alt="About"></img>

Environment

NX Report complete - copy this into the issue template

Node : 15.1.0 OS : darwin x64 yarn : 1.22.4

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 11.1.5 @nrwl/cypress : 11.1.5 @nrwl/devkit : 11.1.5 @nrwl/eslint-plugin-nx : 11.1.5 @nrwl/express : Not Found @nrwl/jest : 11.1.5 @nrwl/linter : 11.1.5 @nrwl/nest : Not Found @nrwl/next : 11.1.5 @nrwl/node : Not Found @nrwl/react : 11.1.5 @nrwl/schematics : Not Found @nrwl/tao : 11.1.5 @nrwl/web : 11.1.5 @nrwl/workspace : 11.1.5 typescript : 4.0.5

DmitryIvanovIAMM commented 3 years ago

I have the same issue. Need to resolve it.

Ivanova-A commented 3 years ago

Please, fix it!

lunaplush commented 3 years ago

I have the same issue. Need to resolve it.

NachoVazquez commented 3 years ago

It works with img but not with native NextJS Image

marqpdx commented 2 years ago

Mine too fails w/ NextJS Image, but works with img

sebadom commented 2 years ago

Is this just me or is this still an issue?

jls527 commented 2 years ago

This is still an issue. Please can someone have a look?

Steps to reproduce:

Create Nx workspace with Next.js app
Generate React library (shared)
Add any image file to shared library and reference it in a React component:
```
import myImage from './assets/my-image.png'
```

export const MyComp = () =>


5. Import the React component in your Next.js app. Image will appear broken - probably like this:

7alip commented 2 years ago

Providing absolute url for NextImage worked for me.

<NextImage src="http://localhost:4200/assets/image.png" />
// <NextImage src={`${NX_APP_URL}/assets/image.png`} />

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx