SignaturePad 签名组件在开发环境可以正常工作，在生产服务器就显示哭脸和大片空白 #4374
Replies: 7 comments 26 replies
-
|
这可能是资源文件没有加载成功。生产环境的网络和开发环境有异，才导致的。不知这种情况要如何解决？ |
Beta Was this translation helpful? Give feedback.
-
|
查了一下html，开发环境中，页面有一个css文件 但在生产环境没有 
不知为何会缺失这个css文件 |
Beta Was this translation helpful? Give feedback.
-
|
@ArgoZhang 麻烦大神看下 |
Beta Was this translation helpful? Give feedback.
-
|
刚刚试了下，把BootstrapBlazor.SignaturePad却换到7.x的低版本后，在生产服务器也可以正常显示了。但7.x自带的无法手写的bug也就出现了，仍然无法使用这个组件。 初步确认css资源在生产服务器无法加载，是组件的问题。 |
Beta Was this translation helpful? Give feedback.
-
因为更换了旧版组件就没有这个问题了。 |
Beta Was this translation helpful? Give feedback.
-
|
@WeiJunFenYou 300 起步，超过 1 小时另外算，建议挂上源码先确保本地无问题 |
Beta Was this translation helpful? Give feedback.
-
|
低版本没问题你考虑过没有是浏览器有缓存呢？你换过电脑吗？浏览器吗？清理过缓存吗？你这排除法什么都没换过怎么就把自己排除了？ |
Beta Was this translation helpful? Give feedback.
-
1、清理过缓存了。清理之后仍然如此。 |
Beta Was this translation helpful? Give feedback.
-
|
我想不通为啥就非要一直说问题的结果，为啥就不上传一个复现工程？涉密项目吗？可以用模板做一个复现工程，方便我们排查问题。不要一直做无效的沟通，提高沟通效率最简单的办法就是提交复现工程 |
Beta Was this translation helpful? Give feedback.
-
|
这个问题刚刚解决了。 我拉取了SignaturePad的源代码，经过修改后，自己打包编译成nuget包。具体过程是： 在SignaturePad组件中，删除了SignaturePad.razor.css，并将其替换为外联样式表。打包后项目就正常了。 SignaturePad.razor.css这种类型的样式表，是Blazor的实验性功能：CSS隔离。这大概是微软的锅。 感谢作者大大的耐心回复。给您填了堵。这个问题后续我会继续跟进，如果这种CSS隔离样式表真的存在一些问题，以后使用是要注意的。 |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
@WeiJunFenYou 大概率是你工程的问题。这么说吧，如果像你这样解决问题，那官网怎么就好使呢？ 但是问题肯定是样式隔离导致的 |
Beta Was this translation helpful? Give feedback.
-
|
是的。现在的解决方案治标不治本，只是临时凑合一下。所以我才说后面要继续跟进，找到根本原因。否则以后作者大大再发布类似的组件，我还要自己拉取源代码打包，那就不好了。😏 |
Beta Was this translation helpful? Give feedback.
-
|
@WeiJunFenYou 我刚才想到一个问题点，应该是这个问题导致的 我猜你引用 SignaturePad 的工程未开启样式隔离，导致最终的样式隔离文件缺少 我们项目的样式文件如下： 你可以观察一下你的项目部署后的样式文件，是否缺少这些 |
Beta Was this translation helpful? Give feedback.
-
|
大概你用的不太清楚Densen informatica在 2024年9月29日，13:11，Argo Zhang ***@***.***> 写道：
@WeiJunFenYou 我刚才想到一个问题点，应该是这个问题导致的
我猜你引用 SignaturePad 的工程未开启样式隔离，导致最终的样式隔离文件缺少 import 语句导致的
我们项目的样式文件如下：
@import '_content/BootstrapBlazor.AntDesignIcon/BootstrapBlazor.AntDesignIcon.bundle.scp.css';
@import '_content/BootstrapBlazor.Bluetooth/BootstrapBlazor.Bluetooth.bundle.scp.css';
@import '_content/BootstrapBlazor.CodeEditor/BootstrapBlazor.CodeEditor.bundle.scp.css';
@import '_content/BootstrapBlazor.ElementIcon/BootstrapBlazor.ElementIcon.bundle.scp.css';
@import '_content/BootstrapBlazor.Gantt/BootstrapBlazor.Gantt.bundle.scp.css';
@import '_content/BootstrapBlazor.IconPark/BootstrapBlazor.IconPark.bundle.scp.css';
@import '_content/BootstrapBlazor.ImageCropper/BootstrapBlazor.ImageCropper.bundle.scp.css';
@import '_content/BootstrapBlazor.Live2DDisplay/BootstrapBlazor.Live2DDisplay.bundle.scp.css';
@import '_content/BootstrapBlazor.MindMap/BootstrapBlazor.MindMap.bundle.scp.css';
@import '_content/BootstrapBlazor.MouseFollower/BootstrapBlazor.MouseFollower.bundle.scp.css';
@import '_content/BootstrapBlazor.SignaturePad/BootstrapBlazor.SignaturePad.bundle.scp.css';
@import '_content/BootstrapBlazor.Splitting/BootstrapBlazor.Splitting.bundle.scp.css';
@import '_content/BootstrapBlazor.SvgEditor/BootstrapBlazor.SvgEditor.bundle.scp.css';
@import '_content/BootstrapBlazor.Topology/BootstrapBlazor.Topology.bundle.scp.css';
@import '_content/BootstrapBlazor.WebAPI/BootstrapBlazor.WebAPI.bundle.scp.css';
@import '_content/BootstrapBlazor/BootstrapBlazor.bundle.scp.css';
你可以观察一下你的项目部署后的样式文件，是否缺少这些 import
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
看了下，的确没有这些import。微软的官方文档说，CSS 隔离开箱即用，不需要配置什么。大佬的项目中配置过与此有关的东西吗？ |
Beta Was this translation helpful? Give feedback.
-
|
我不是告诉你了吗？认真读几遍我说的话，是我猜的。开启就好了 |
Beta Was this translation helpful? Give feedback.
-
|
又找到了一个新的解决方法： |
Beta Was this translation helpful? Give feedback.
-
|
下个里程碑，准备把这些样式统一处理一下，均采用自动加载的方式导入，与样式隔离技术脱钩，可以杜绝此类问题 |
Beta Was this translation helpful? Give feedback.
-
|
@WeiJunFenYou @densen2014 发布 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
<Modal @ref="PadModal"> <ModalDialog IsCentered="true" Title="请签名" ShowSaveButton="false" SaveButtonText="确认" Size="Size.Medium" > <BodyTemplate> <SignaturePad OnResult="OnResult" /> </BodyTemplate> </ModalDialog> </Modal>代码如上所示，在本地调试的时候，正常工作：
当发布到生产服务器时，就变成了这样：
Beta Was this translation helpful? Give feedback.
All reactions