fix(web/ChapterContent.vue): replace img src when origin src load error
This commit is contained in:
@@ -13,7 +13,7 @@
|
|||||||
@error.once="proxyImage"
|
@error.once="proxyImage"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
<p v-else :style="{ fontFamily, fontSize }" v-html="para" />
|
<p v-else :style="{ fontFamily, fontSize }" v-html="para" @error.capture="handleImgLoadError" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -48,11 +48,37 @@ const getImageSrc = (content: string) => {
|
|||||||
return src
|
return src
|
||||||
}
|
}
|
||||||
const proxyImage = (event: Event) => {
|
const proxyImage = (event: Event) => {
|
||||||
;(event.target as HTMLImageElement).src = API.getProxyImageUrl(
|
/* 获取IMG标签原始的src
|
||||||
bookUrl.value,
|
<img src="/test" />
|
||||||
(event.target as HTMLImageElement).src,
|
假设location.href = http://example.com
|
||||||
readWidth.value,
|
event.target.src 返回 http://example.com/test
|
||||||
)
|
(event.target as HTMLImageElement)?.getAttribute("src") 返回/test
|
||||||
|
*/
|
||||||
|
const src = (event.target as HTMLImageElement)?.getAttribute("src")
|
||||||
|
if (src != null && src.length > 0) {
|
||||||
|
(event.target as HTMLImageElement).src = API.getProxyImageUrl(
|
||||||
|
bookUrl.value,
|
||||||
|
src,
|
||||||
|
readWidth.value,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理传入的IMG标签错误事件,自动替换图片的代理链接
|
||||||
|
*/
|
||||||
|
const handleImgLoadError = (event: Event) => {
|
||||||
|
if ((event.target as HTMLElement)?.tagName === "IMG") {
|
||||||
|
console.log("[ChapterContent]: IMG Load Error, replace src:",
|
||||||
|
(event.target as HTMLImageElement)?.getAttribute("src"), "=>",
|
||||||
|
API.getProxyImageUrl(
|
||||||
|
bookUrl.value,
|
||||||
|
(event.target as HTMLImageElement)?.getAttribute("src") ?? "",
|
||||||
|
readWidth.value,
|
||||||
|
)
|
||||||
|
)
|
||||||
|
proxyImage(event)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const calculateWordCount = (paragraph: string) => {
|
const calculateWordCount = (paragraph: string) => {
|
||||||
|
|||||||
@@ -305,12 +305,6 @@ const getContent = (index: number, reloadChapter = true, chapterPos = 0) => {
|
|||||||
if (res.data.isSuccess) {
|
if (res.data.isSuccess) {
|
||||||
const data = res.data.data
|
const data = res.data.data
|
||||||
const content = data.split(/\n+/)
|
const content = data.split(/\n+/)
|
||||||
const urlEncodedBookUrl = encodeURIComponent(bookUrl)
|
|
||||||
for (let i = 0; i < content.length; i++) {
|
|
||||||
if (!/^\s*<img[^>]*src[^>]+>$/.test(content[i])) {
|
|
||||||
content[i] = content[i].replace(new RegExp('img src="', 'g'), `img src="/image?url=${urlEncodedBookUrl}&path=`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
chapterData.value.push({ index, content, title })
|
chapterData.value.push({ index, content, title })
|
||||||
if (reloadChapter) toChapterPos(chapterPos)
|
if (reloadChapter) toChapterPos(chapterPos)
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Reference in New Issue
Block a user