问题描述
我有一个用例,我必须动态绑定 src
标记的 <g-image>
属性。我知道我可以使用 javascrpt expressions in v-bind
,所以我继续。但这里有一个悖论:
<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"/>
解决方法
src
属性和 width
、height
和 quality
等选项必须是静态值,因为它们被编译成一个包含 URL 和其他信息的对象,这些信息将被呈现为 img
标记
我承认我不是 Gridsome 的普通用户,接下来的一切都来自我对 Vue/Webpack、Gridsome 文档和 this issue
的理解g-image
是 Gridsome 提供的组件,旨在使响应式图像的使用更容易。大部分工作在构建时间期间完成 - 他们使用一些 Webpack 魔法来处理 Vue 模板。如果找到 g-image
,则读取它的 src
属性,如果它包含现有本地图像的路径,则获取图像,生成不同大小的多个副本并添加 srcset 属性,允许浏览器根据屏幕大小决定下载哪个图像...
重要的是这一切都发生在构建时。这意味着您的应用未运行,这意味着无法评估用于 src
的任何 JS 动态表达式(可能基于应用状态)!
它可能看起来像使用 require()
(这是 allows some dynamic content 的 Webpack 构造)使其工作,但您将失去主要的 g-image
功能,即自动生成响应式图像...
这在 Gridsome 方面不是一个容易解决的问题(看看这个问题有多老,以及它得到了多少维护者的关注)。如果您真的想要动态响应式图像,则需要使用简单的 img
并以其他方式生成图像变体(和 srcset
)。或者您可以使用 Cloudinary 即时生成这些图像....