升级Vitepress至1.3.4/1.4.3后public目录图片失效问题咨询
补充说明:经测试,在Vitepress 1.4.3中,追加'?url'的图片URL语法已失效。目前引用public目录图片时建议忽略控制台提示。
我有一个Vitepress项目,因需在自定义Vue组件中动态链接图片,大量引用public目录下的图片。在Vitepress 1.3.1版本中该方式运行正常,但升级至1.3.4后图片无法显示,启动时控制台针对每张图片都弹出如下警告:
Assets in public directory cannot be imported from JavaScript.
If you intend to import that asset, put the file in the src directory, and use
/src/img/0004IMG_10938_copy.jpginstead of/public/img/0004IMG_10938_copy.jpg.If you intend to use the URL of that asset, use
/img/0004IMG_10938_copy.jpg?url.
需要说明的是,我已经采用了?url语法。代码引用示例如下:
自定义Vue组件模板部分
<img v-if="hasImg" :src="doc_image" :class="getClass()" alt="" @click="fsView = true" />
脚本部分
const getImg = computed((): string => { return withBase(`/img/${frontmatter.value.image}?url`) })
onBeforeUpdate钩子中
doc_image.value = getImg.value
该方式曾在1.3.1版本正常运行,升级至1.3.4后突然失效,此情况较为异常。我是按照Vitepress文档中的方法实现的。
内容的提问来源于stack exchange,提问作者Mark Hagers
相关产品推荐
相关产品推荐

