使用 ES6 动态更新图像 SRC答案

【问题标题】：Dynamically Updating Image SRC using ES6使用 ES6 动态更新图像 SRC
【发布时间】：2021-11-04 19:23:24
【问题描述】：

我有一个用 PHP 定义的全局 JavaScript 变量，用于 WordPress 块。

当页面最初加载时，“星”图像会按预期显示。触发更改事件时，控制台中会出现 404 错误，其中 URL 为“https://site.dev/img/var_set_in_php.imageSunset”而不是“https://site.dev/img/sunset.jpg” .

如何更新它以获取 PHP 中设置的值？我是 ES6 的新手，所以希望它只是我所缺少的一些简单的东西。

wp_localize_script(
    'image-js',
    'var_set_in_php', // Array containing dynamic data for a JS Global.
    array(
        'imageStars' => '/img/stars.jpg',
        'imageSunset' => '/img/sunset.jpg',
    )
);

function onChangeFunction(name) {
    // name is set to "Sunset"
    document.getElementById('image').src = `var_set_in_php.image${name}`;
}

<img src={var_set_in_php.imageStars} id="image" />

【问题讨论】：

这是一个 X/Y 问题 - 你需要修复底层问题而不是用 JS 修补它
@mplungjan 感谢您的回复。我只是为了让我的示例保持简单，但是在 WordPress 编辑器中工作时需要更新预览图像。不，在控制台中仍然出现同样的错误。它正在寻找具有变量名称的图像，而不是尝试在定义的路径上加载它。
`var_set_in_php.image${name}}` 也不健康 - 有一个奇怪的尾随 }
呈现的 HTML 看起来像：

标签： javascript php variables ecmascript-6 jsx

【解决方案1】：

我认为你有一个

var var_set_in_php = {
 'imageStars' :'/img/stars.jpg', 
 'imageSunset' : '/img/sunset.jpg'
}

如果你这样做了，你需要这个来使用复合变量访问对象

document.getElementById('image').src = var_set_in_php[`image${name}`];

【讨论】：

这正是我所需要的。一直在拉我的头发！大声笑谢谢！
差点让我把它拉出来，因为我最初无法在没有看到渲染的 JS 的情况下猜出问题是什么（渲染的 HTML 没有帮助，所以我猜到了）