使用 ES6 动态更新图像 SRC

Question

我在 PHP 中定义了全局 JavaScript 变量，用于 WordPress 块。

最初加载页面时，“星星”图像按预期显示。触发更改事件时，控制台中会出现 404 错误，其中“https://site.dev/img/var_set_in_php.imageSunset”作为 URL 而不是“https://site.[=20= .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" />

Answer 1

我想你有一个

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

如果你这样做，你需要它来访问带有复合变量的对象

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

使用 ES6 动态更新图像 SRC

Dynamically Updating Image SRC using ES6

javascript

php

variables

jsx

ecmascript-6