reactjs 在Nx monorepo的Nextjs应用中使用时,未找到React库组件bg-image

bttbmeg0  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(92)

我的React库组件在我的Next中使用时找不到它的背景图像。js app(都在我的Nx工作区中)。
Console:*localhost:4200/images/svg/Background.404 Not Found(Not Found)
文档没有告诉任何有用的东西,我已经在谷歌上搜索了几个小时,没有找到工作解决方案。为什么一些应该开箱即用的东西看起来这么难,我错过了什么?
我正在运行最新版本的Nx workspace:15.9.2
在Nx monorepo内,我有:

  • app1(nextjs w tailwindcss)
  • ui-lib(使用tailwindcss的react ui组件库)

图书馆:

  • React组分:src/lib
  • images:public/images/svg

ui lib组件如何使用它们的bg-images(TailwindCSS):

bg-[url('/images/svg/Background.svg')]

应用程序的tsconfig。json“paths”:

"paths": {
  "@ui-lib": ["libs/ui-lib/src/index.ts"]
},

库的public/*内容不会与nx serve app 1合并并由nx serve app 1提供服务吗?

lqfhib0f

lqfhib0f1#

想明白了

  • 将图像放置在libs/library-name/assets/images/中。..(公共工程也是)
  • setsvgr:truein next.应用的config.js(在此之后重新启动nx serve)
  • 将SVG图像导入库组件,如下所示:

从“”导入背景。./../assets/images/svg/Background.斯维格
不要使用TailwindCSS来设置背景,而是用随意的React方式来设置:
style={{ backgroundImage:url(${Background})

相关问题