Phoenix渲染图片出现属性值未闭合报错的解决方法

• 场景：Phoenix框架新手，需要在主页展示所有文章及对应配图，在post目录的index模板中编写了图片渲染代码
• 原始错误代码：

<img src="<%= Blog.Image.url({@post.image, @post}, signed: true) %>">

• 运行报错信息：

lib/blog_web/templates/post/index.html.heex:19:21: expected closing " for attribute value

报错是HEEx模板语法使用错误导致的：

• 你当前使用的.html.heex是Phoenix 1.6版本之后默认启用的模板引擎，它的动态值绑定规则和旧版EEx模板不同
• 旧版.html.eex模板支持将<%= %>插值语法写在HTML属性的双引号内，但HEEx不支持这种写法
• HEEx解析器会将双引号包裹的内容识别为静态属性值，逐字符解析时会提前误判引号闭合位置，最终抛出找不到属性闭合引号的错误

HEEx中为HTML属性绑定动态值时，直接用{}包裹Elixir表达式即可，不需要额外加双引号，也不需要写<%= %>插值标签，修正后的代码：

<img src={Blog.Image.url({@post.image, @post}, signed: true)} />

如果需要渲染列表内所有文章的配图，将上述代码放在@posts集合的遍历块内部，保证每轮循环能正确取到当前文章对应的@post结构体即可。

内容的提问来源于stack exchange，提问作者Aleksandr