ES6动态更新图片src时如何读取WordPress中PHP注入的全局JS变量值

问题根因 #

你在模板字面量中直接将var_set_in_php.image${name}作为字符串赋值给src，JS不会自动解析这段字符串为对象属性读取逻辑，所以最终请求地址会把这段字符串直接拼接到站点域名后，导致404错误。

修复方案 #

JS中要读取对象的动态属性，需要用方括号语法，修改后的函数代码如下：

function onChangeFunction(name) {
    // 先拼接动态属性名，再通过方括号读取全局对象的对应属性值
    document.getElementById('image').src = var_set_in_php[`image${name}`];
}

补充说明 #

你初始化时<img src={var_set_in_php.imageStars}>能正常工作，是因为这段代码是在JSX语法环境下执行，花括号内的内容会被解析为变量读取，不会被当成字符串处理。
如果担心全局变量作用域问题，也可以显式从window对象读取变量，写法为window.var_set_in_php[image${name}]，兼容性更好。

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