我有一个用例,其中我必须动态绑定<g-image>
标记的src
属性。我已经知道我可以在v-bind
中使用javascrpt表达式,所以我继续
<g-image :src="'~/images/blocks.png'" width="500"/> // does not work
<g-image src="~/images/blocks.png" width="500"/> //works!
为什么一个有效,另一个无效,尽管他们应该按照相同的价值观进行评估?我计划将其用作<g-image :src="'~/images/'+imageName+'.png'" width="500"/>
Gridsome文档
src
属性和选项(如width
、height
和quality
(必须是静态值,因为它们被编译到一个对象中,该对象包含将被呈现为img
标签的URL和其他信息
我承认我不是Gridsome的常客,下面的一切都来自于我对Vue/Webpack、Gridsome文档和这个问题的理解
g-image
是Gridsome提供的组件,旨在使响应图像的使用更容易。大部分工作都是在构建期间完成的-他们使用一些Webpack魔术来处理Vue模板。如果找到了g-image
,它的src
属性将被读取,如果它包含现有本地图像的路径,他们会获取图像,生成不同大小的多个副本,并添加srcset属性,该属性允许浏览器根据屏幕大小决定下载哪个图像。。。
重要的是,这一切都发生在构建时。这意味着您的应用程序没有运行,这意味着无法评估用于src
的任何JS动态表达式(可能基于应用程序状态(!
使用require()
(这是一种允许一些动态内容的Webpack结构(似乎可以让它发挥作用,但你会失去g-image
的主要功能,即自动生成响应图像。。。
在Gridsome方面,这不是一个容易解决的问题(看看这个问题有多古老,维护人员对它的关注有多大(。如果你真的想要动态响应图像,你需要使用简单的img
并以其他方式生成图像变体(和srcset
(。或者,您可以使用Cloudinary动态生成这些图像。。。。