如何正确动态加载图像并运行npm run build部署到firebase？

如何解决如何正确动态加载图像并运行npm run build部署到firebase？

但是我试图从/ public / images-cocktails中的文件夹加载图像。当我在本地运行代码时，一切都会按预期进行。这是我在CocktailMain.js中的代码：

optionValue

此处在SearchResults中呈现（通过react-redux）。基本上，cocktail.thumbnail将替换为图像的位置：

searchCocktails() {
    let ctbmade = [];
    console.time("foreach");
    this.props.cocktails.forEach((cocktail) => {
        let ingredientsMatch = 0;
        for (var j = 0; j < this.props.ingredientsChecked.length; j++) {
            // eslint-disable-next-line
            cocktail.ingredients.forEach((ingredient) => {
                // console.log("Checking '" + cocktail.name + "'");
                var ingredientInCocktail = ingredient;
                if (ingredient.includes("-")) {
                    ingredientInCocktail = ingredientInCocktail.substring(0,ingredientInCocktail.indexOf(" -")); // bacardi - 30ml
                }

                // console.log(
                //  "ingredientsChecked: " +
                //      this.props.ingredientsChecked[j] +
                //      " | " +
                //      "s: [" +
                //      ingredientInCocktail +
                //      "]"
                // );

                if (ingredientInCocktail === this.props.ingredientsChecked[j]) {
                    ingredientsMatch += 1;
                    console.log("MATCH!");
                }
            });
        }

        var percentageMatched = (ingredientsMatch / cocktail.ingredients.length) * 100;
        console.log(cocktail.name + ": " + percentageMatched + "%");

        if (percentageMatched >= 60) {

            /* IT'S ABOUT THE CODE BELOW */
            var location = "/images-cocktails/" + cocktail.name.replace(" ","%20") + ".jpg";

            var thumbnail = location;

            console.log(cocktail.garnering);

            ctbmade.push({
                name: cocktail.name,percentageMatched,thumbnail,recept: cocktail.recept,ingredients: cocktail.ingredients,garnering: cocktail.garnering !== undefined ? cocktail.garnering : "",opmerking: cocktail.opmerking !== undefined ? cocktail.opmerking : "",});

        /* IT IS ABOUT THE CODE ABOVE */
        }

        ctbmade.sort(function (a,b) {
            if (a.percentageMatched > b.percentageMatched) {
                return -1;
            }

            if (a.percentageMatched < b.percentageMatched) {
                return 1;
            }

            return 0;
        });

        store.dispatch({
            type: "COCKTAILS_TO_BE_MADE",payload: {
                cocktailsToBeMade: ctbmade,},});

        console.log(this.props.cocktailsToBeMade);
    });
    console.timeEnd("foreach");

    this.props.cocktailsToBeMade.forEach((cocktailToBeMade) => {
        console.log(cocktailToBeMade);
    });

    this.props.changeScreenTo("search_results");
}

但是，当我运行“ npm run build”时，“ build”中的文件夹结构是这样的：（这是我用来部署到Firebase的文件夹）

render() {
    return (
        <div className="container--box  mt-small">
            <h1 className="mb">
                Cocktails <br />
                Maak en Proef!
            </h1>

            <div className="overflow--scroll">
                {this.props.cocktailsToBeMade.map((cocktail) => {
                    return (
                        <div className="row">
                            <div className="col-xs-12 flex-align-center flex-justify-between border-top border-bottom pt pb">
                                <div>
                                    <img src={cocktail.thumbnail} className="img-thumbnail" alt={cocktail.name} />
                                </div>
                                <div>
                                    <p>
                                        {cocktail.name} <br />({cocktail.percentageMatched}% match)
                                    </p>
                                    <button
                                        type="button"
                                        className="btn btn--primary"
                                        onClick={() => this.props.recept(cocktail)}
                                    >
                                        Recept
                                    </button>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>

            <button className="btn btn--tertiary mt" onClick={() => this.props.changeScreenTo("home")}>
                Terug naar begin
            </button>
        </div>
    );
}
}

通过我的App.scss文件加载鸡尾酒的主要背景，如下所示：

build
|-- images-cocktails
    |-- baco.jpg
|-- static
    |-- media
        | -- cocktail-main-bg.7474924.jpg

我的文件夹结构是这样的： -建立 - 上市 -图像鸡尾酒 -baco.jpg - 图片 -鸡尾酒-main-bg.jpg -src - 组件 -SearchResults.js（在其中渲染图像） -CocktailMain.js（在其中计算图像的位置）