javascript - 如何在 javascript 中调用图像

Question

我有一个用于我正在开发的游戏市场的货币转换器，我希望用户能够在 JavaScript 中生成图像。我不确定这是否有意义，但我已经完成了大部分工作，我只需要显示图像而不是损坏的图像框

我尝试过更改图像的绘制路径，但我不太了解 javascript

const data = [
    {
        currency: 'btc',
        we_buy: 0.58,
        we_sell: 0.77,
        img_path: 'null',
        icon: 'fab fa-btc'
    },
    {
        currency: 'usd',
        we_buy: 0.67,
        we_sell: 0.82,
        img_path: './united-states.svg',
        icon: 'fas fa-dollar-sign'
    },
    {
        currency: 'gbp',
        we_buy: 0.50,
        we_sell: 0.68,
        img_path: './united_kingdom.svg',
        icon: 'fas fa-pound-sign'
    },
    {
        currency: 'eur',
        we_buy: 0.59,
        we_sell: 0.76,
        img_path: './european-union.svg',
        icon: 'fas fa-euro-sign'
    }
];
const imagesContainer = document.getElementById("currencies");
let selectedCurrency = null;
var selectCurrency = function (index) {
    const element = data[index];
    selectedCurrency = data[index];
    document.getElementById("currency-selected").innerHTML = `Currency selected: ${element.currency}`;
    document.getElementById("data_icon").className = element.icon; 
};
(() => {
    for (let i = 0; i < data.length; i++) {
        imagesContainer.innerHTML += `<div class="currency" onclick=selectCurrency(${i})><img id=${i} src=${data[i].img_path}></div>`;
    }
    selectCurrency(0);
    const amount = document.getElementById("amount");
    amount.onkeyup = () => {
        const output_we_buy = document.getElementById("output_we_buy");
        const output_we_sell = document.getElementById("output_we_sell");
        if (amount.value === '') {
            output_we_buy.innerHTML = 0;
            output_we_sell.innerHTML = 0;
            return;
        }
        if (!isNaN(amount.value)) {
            output_we_buy.innerHTML = `${(+amount.value * selectedCurrency.we_buy).toFixed(2)}`;
            output_we_sell.innerHTML = `${(+amount.value * selectedCurrency.we_sell).toFixed(2)}`;
        }
    }
})();

<div class="container-fluid">
    <div class="currencies-container">
        <div class="currencies" id="currencies">

        </div>
        <div class="currency-selected" id="currency-selected">
            No currency selected.
        </div>

        <div class="output">
            <div class="row">
                <div class="col-6 input-group">
                    <input type="number" class="form-control" aria-label="Amount of GP in Millions" placeholder="Amount of GP (in millions)"
                        id="amount">
                    <div class="input-group-append">
                        <span class="input-group-text"><i id="data_icon"></i></span>
                        <span class="input-group-text" id="output_we_buy">.00</span>
                        <span class="input-group-text" id="output_we_sell">.00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我希望在货币选择时显示存储在目录中的图像

Answer 1

我没有指定文件夹 - 菜鸟错误