为啥 Vue 绑定 <g-image> 中的 javascript 表达式不起作用？

Posted 2023-02-23

【中文标题】为啥 Vue 绑定 <g-image> 中的 javascript 表达式不起作用？

【英文标题】：Why does javascript expression in Vue binding <g-image> does not work?为什么 Vue 绑定 <g-image> 中的 javascript 表达式不起作用？

【发布时间】：2021-04-12 14:40:12

【问题描述】：

我有一个用例，我必须动态绑定<g-image> 标签的src 属性。我知道我可以使用javascrpt expressions in v-bind，所以我继续。但这里有一个悖论：

<g-image :src="'~/images/blocks.png'" /> // does not work
<g-image src="~/images/blocks.png" /> //works!

为什么一个有效而另一个无效，即使它们应该评估为相同的值？ 我打算然后将其用作<g-image :src="'~/images/'+imageName+'.png'" width="500"/>

【问题讨论】：

请查看***.com/questions/53950105/…

您是否尝试过使用 v-bind:src 而不是 :src 如果您直接在 html (iirc) 中工作，速记语法 (:src) 可能不起作用

【参考方案1】：

Gridsome documentation

src 属性和width、height 和quality 等选项必须是静态值，因为它们被编译成一个对象，其中包含将呈现到img 标记中的 URL 和其他信息

我承认我不是一个普通的 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 即时生成这些图像....