Static images not loading from assets library

[3gwebtrain]

I am trying to load the images from shared assets library in to stories i created with libraries in Nx workspace. I have made necessary changes for that. but images loading in images.

my Main.js

staticDirs: [{ from: "../../../libs/shared/assets/src/lib/images/", to:'./assets/images/' }],

on complier I am getting the following information:

info => Serving static files from ./.\libs\shared\assets\src\lib\images\ at /.\assets\images

But stories on browser: Loaded with no image. Please help.

[AgentEnder]

What does nx report say?

[3gwebtrain]

Here is the Nx report:

node\16.16.0\node_modules\npm\bin\npm-cli.js npm info using npm@8.11.0 npm info using node@v16.16.0 npm timing npm:load:whichnode Completed in 1ms npm timing config:load:defaults Completed in 4ms npm timing config:load:file:C:\Users\BASHIMX5\AppData\Local\Volta\tools\image\node\16.16.0\node_modules\npm\npmrc Completed in 2ms npm timing config:load:builtin Completed in 3ms npm WARN config global--global,--localare deprecated. Use--location=global` instead. npm timing config:load:cli Completed in 4ms npm timing config:load:env Completed in 6ms npm timing config:load:project Completed in 2ms npm timing config:load:file:C:\Users\BASHIMX5.npmrc Completed in 16ms npm timing config:load:user Completed in 17ms npm timing config:load:file:C:\Users\BASHIMX5\AppData\Local\Volta\tools\image\node\16.16.0\etc\npmrc Completed in 1ms npm timing config:load:global Completed in 1ms npm timing config:load:validate Completed in 2ms npm timing config:load:credentials Completed in 1ms npm timing config:load:setEnvs Completed in 1ms npm timing config:load Completed in 41ms npm timing npm:load:configload Completed in 42ms npm timing npm:load:mkdirpcache Completed in 2ms npm timing npm:load:mkdirplogs Completed in 2ms npm verb title npm prefix npm verb argv "prefix" "--global" npm timing npm:load:setTitle Completed in 2ms npm timing config:load:flatten Completed in 6ms npm timing npm:load:display Completed in 21ms npm verb logfile logs-max:10 dir:C:\Users\BASHIMX5\AppData\Local\npm-cache_logs npm verb logfile C:\Users\BASHIMX5\AppData\Local\npm-cache_logs\2022-08-03T09_37_51_227Z-debug-0.log npm timing npm:load:logFile Completed in 30ms npm timing npm:load:timers Completed in 0ms npm timing npm:load:configScope Completed in 0ms npm timing npm:load Completed in 102ms npm timing command:prefix Completed in 2ms npm verb exit 0 npm timing npm Completed in 191ms npm info ok npm verb cli C:\Users\BASHIMX5\AppData\Local\Volta\tools\image\node\16.16.0\node.exe C:\Users\BASHIMX5\AppData\Local\Volta\tools\image\node\16.16.0\node_modules\npm\bin\npm-cli.js npm info using npm@8.11.0 npm info using node@v16.16.0 npm timing npm:load:whichnode Completed in 1ms npm timing config:load:defaults Completed in 2ms npm timing config:load:file:C:\Users\BASHIMX5\AppData\Local\Volta\tools\image\node\16.16.0\node_modules\npm\npmrc Completed in 26ms npm timing config:load:builtin Completed in 26ms npm timing config:load:cli Completed in 4ms npm timing config:load:env Completed in 4ms npm timing config:load:file:C:\Users\BASHIMX5\Projects\Bitbucket\hf-ui.npmrc Completed in 0ms npm timing config:load:project Completed in 11ms npm timing config:load:file:C:\Users\BASHIMX5.npmrc Completed in 6ms npm timing config:load:user Completed in 7ms npm timing config:load:file:C:\Users\BASHIMX5\AppData\Local\Volta\tools\image\node\16.16.0\etc\npmrc Completed in 1ms npm timing config:load:global Completed in 1ms npm timing config:load:validate Completed in 4ms npm timing config:load:credentials Completed in 2ms npm timing config:load:setEnvs Completed in 1ms npm timing config:load Completed in 65ms npm timing npm:load:configload Completed in 65ms npm timing npm:load:mkdirpcache Completed in 2ms npm timing npm:load:mkdirplogs Completed in 2ms npm verb title npm npm verb argv "--version" npm timing npm:load:setTitle Completed in 3ms npm timing config:load:flatten Completed in 6ms npm timing npm:load:display Completed in 19ms npm verb logfile logs-max:10 dir:C:\Users\BASHIMX5\AppData\Local\npm-cache_logs npm verb logfile C:\Users\BASHIMX5\AppData\Local\npm-cache_logs\2022-08-03T09_37_53_116Z-debug-0.log npm timing npm:load:logFile Completed in 11ms npm timing npm:load:timers Completed in 0ms npm timing npm:load:configScope Completed in 0ms npm timing npm:load Completed in 106ms npm verb exit 0 npm timing npm Completed in 119ms npm info ok

NX Report complete - copy this into the issue template

Node : 16.16.0 OS : win32 x64 npm : 8.11.0

nx : 14.5.1 @nrwl/angular : 14.5.1 @nrwl/cypress : 14.5.1 @nrwl/detox : Not Found @nrwl/devkit : 14.5.1 @nrwl/eslint-plugin-nx : 14.5.1 @nrwl/express : Not Found @nrwl/jest : 14.5.1 @nrwl/js : 14.5.1 @nrwl/linter : 14.5.1 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/nx-plugin : Not Found @nrwl/react : Not Found @nrwl/react-native : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 14.5.1 @nrwl/web : 14.5.1 @nrwl/workspace : 14.5.1 typescript : 4.7.4

Community plugins: @ngrx/component-store: 14.0.2 @ngrx/effects: 13.0.2 @ngrx/entity: 13.0.2 @ngrx/router-store: 13.0.2 @ngrx/store: 14.0.2 @ngrx/schematics: 13.0.2 @ngrx/store-devtools: 13.0.2 @storybook/angular: 6.4.22 @testing-library/angular: 12.0.1 `

[Coly010]

You should be able to do this directly from your project.json

There's an assets option that allows you to specify different locations for your assets. Have you tried that?

[mrtcntn]

You should be able to do this directly from your project.json

There's an assets option that allows you to specify different locations for your assets. Have you tried that?

I have the setup you described, linking my assets like this in my Next.js app's project.json:

"build": {
      "executor": "@nrwl/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "root": "apps/app",
        "outputPath": "dist/apps/app",
        "assets": [
          {
            "input": "libs/ui/static",
            "glob": "**/*",
            "output": ""
          },
          {
            "input": "libs/ui/icons/assets",
            "glob": "**/*",
            "output": "assets/icons"
          }
        ]
      },
      "configurations": {
        "production": {},
        "development": {}
      }
    }

Where I have the assets at libs/ui/icons/assets and trying to load my assets using <img src="/assets/icons/icon.png">. This setup worked fine in previous versions but crashed with 15.5.4. In #11431 I saw this comment. Updating copy-webpack-plugin might have changed the previous behavior.

[LouisLecouturier]

is it working ? I did the exact same thing but it doesn't work

[3gwebtrain]

I am updated my project.json like this:

{
  "projectType": "library",
  "sourceRoot": "libs/storybook/src",
  "prefix": "hf-workspace",
  "targets": {
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["coverage/libs/storybook"],
      "options": {
        "jestConfig": "libs/storybook/jest.config.ts",
        "passWithNoTests": true
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "options": {
        "lintFilePatterns": [
          "libs/storybook/**/*.ts",
          "libs/storybook/**/*.html"
        ]
      }
    },
    "storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "port": 4400,
        "configDir": "libs/storybook/.storybook",
        "browserTarget": "storybook:build-storybook",
        "compodoc": false,
        "styles": [
          "libs/shared/assets/src/lib/styles/_base.scss",
          "libs/shared/assets/src/lib/styles/_theme.scss"
        ]
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@storybook/angular:build-storybook",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputDir": "dist/storybook/storybook",
        "configDir": "libs/storybook/.storybook",
        "browserTarget": "storybook:build-storybook",
        "compodoc": false,
        "assets":[
          {
            "input": "libs/shared/assets/src/lib",
            "glob": "**/*",
            "output": "/assets/"
          }
        ],
        "styles": ["libs/shared/assets/src/lib/styles/_base.scss"]
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }
  },
  "tags": []
}

But getting an error as :

>  NX   Schema validation failed with the following errors:

     Data path "" must NOT have additional properties(assets).
   Pass --verbose to see the stacktrace.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[sabindev]

this also happens to me

[github-actions[bot]]

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.