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.
-
<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