现在可以正常显示图片了
原来的html不能正确显示图片的根本问题是图片路径不对，相应的路径没有这个图片
img src="us.png" 等于 img src="./us.png"，也就是当前路径没有us.png，所以图片加载不出来。
至于现在可以正常显示图片，是因为现在通过
<img src="bres://2ee685d6ca8ab1866bbe1ad8826860e0/us.png"
找到图片了，有关更详细的解释见下面链接
像图片这类资源文件都是打包在mdd里面，请自己先去学习mdx和mdd再来讨论，不懂没关系，但不要随便下结论误导其他人。谢谢。
@xiaoyifang @slbtty @atauzki 看下这个问题，NG 没有替换图片里 srcset 给定的路径：
srcset.mdx.zip (1.4 KB)
查询: abc
# gdlookup://localhost/us-2x.png
<img src="us.png" srcset="us.png 1x, us-2x.png 2x">
# gdlookup://localhost/us-2x.png
<img src="us.png" srcset="us-2x.png 2x">
# gdlookup://localhost/us-2x.png
<img src="us.png" srcset="us-2x.png">
# bres://0f3fff403042a0ca7329fca67207c45a/us.png
<img src="us.png">
1 Like
不是单纯打包就好了，路径也得对。
相应的效果图在 Playground | MDN 如图所示：
参考html文件如下：
<div id="showhidebuttons">
<button id="hideallquots" class="smallbutton">Show All</button>
<button id="showallquots" class="smallbutton">Hide All</button>
</div>
参考css文件如下：
#showhidebuttons {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9999; /* 确保按钮位于其他内容上方 */
}
参考js文件如下：
// 获取按钮元素
var showhideButtons = document.getElementById("showhidebuttons");
// 监听窗口滚动事件
window.addEventListener("scroll", function() {
// 获取滚动距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 更新按钮位置
if (scrollTop > 0) {
showhideButtons.style.top = scrollTop + "px";
} else {
showhideButtons.style.top = "0";
}
});
这个好像是gd原版就有的问题
有没有详细的问题描述，我看看能不能解决掉。
看提交有修过 srcset 的问题，我没跑代码，看不出问题来。 fix: mdx dictionary source content can not display correctly · xiaoyifang/goldendict-ng@dc44f89 (github.com)
修过了应该就没问题了，之前图片不能加载，现在图片可以加载了，最关键的改变是
原来
<img src="us.png"
现在
<img src="bres://2ee685d6ca8ab1866bbe1ad8826860e0/us.png"
至于 <img src="bres:// 解释见 如何优化 GoldenDict 查词速度 - #11，来自 slbtty
srcset 只是描述图片的属性，srcset 这个属性有没有不影响图片是否显示， 参考 响应式图像教程 - 阮一峰的网络日志
下图重点部分我用红色圈起来了
srcRe可以匹配，但是srcRe2是不行的，代码里面只有srcRe匹配失败才会调srcRe2
但是匹配结果来看，这样替换是有问题的
详细见regex101: build, test, and debug regex
1 Like
@hua #32 楼开始，帮忙分拆下这个话题。
图片路径是 GD 替换的，词典作者不需要处理这个问题。srcset 是生效的，使用开发者工具查看网络面板，有对应的请求。
对，只要替换一下 srcset 里面的链接就可以了。
之前的代码只 match 了一次，也就是 <img src="" 的部分，后面的完全没动 
。
高分屏的时候可能会有 2x 标注的的图片，可能会有区别。
1 Like