Rails 7 importmap leaflet-css 图像路径修复？

我想做的事：

我想要一个传单层数控制在我的 Rails 7 应用程序中。

我得到什么：

传单工作正常，但控制显示时没有图标， 像这样：

在浏览器控制台中我收到此错误：

GET http://my_ip/trial_models/undefined/layers.png 404 (Not Found)

在我的服务器日志中，错误显示如下：

Started GET "/trial_models/undefined/layers.png" for my_ip at 2022-03-30 06:50:43 +0000
ActionController::RoutingError (No route matches [GET] "/trial_models/undefined/layers.png"):

我已将实际 IP 地址替换为“my_ip”。这 'undefined' 确实存在于错误消息中。

我是怎么做到的：

首先，我创建了一个 Rails 7 应用程序并导入了传单，如下所示：

./bin/importmap pin leaflet
./bin/importmap pin leaflet-css

然后我使用标准 Rails g 脚手架创建了一个 TrialModel。然后我添加了以下刺激 divtrail_models\show.html.erb :

<div data-controller="trialmap" data-trialmap-target="trial" style="height:600px" class="leaflet-container"></div>

我创建\app\javascript\controllers\trialmap_controller.js包含以下内容：

import { Controller } from "@hotwired/stimulus";
import "leaflet-css";

export default class extends Controller {
    static targets = [ "trial" ]

    connect(){
        import("leaflet").then( L => {
            this.map = L.map(this.trialTarget).setView([ 51.472814, 7.321673 ], 14);
            var base_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | <a href="https://www.swmmgo.com">SwmmGo</a>',
                transparency: true,
                opacity: 0.5
            }).addTo(this.map);
            var landMap = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {attribution: 'attributions'});
            var layersControl = new L.Control.Layers({
                "Street Map": base_map,
                "Landscape": landMap
            });
            this.map.addControl(layersControl);
        });
    }

    disconnect(){
        this.map.remove()
    }
}

我探索过的内容：

我尝试像这样下载 leaflet-css ：

./bin/importmap pin leaflet-css --download

但结果相同。

我可以看到有一个参考background-image:url(images/layers.png);在导入/下载的文件中vendor/javascript/leaflet-css.js。但似乎没有任何图像文件夹像vendor/javascript/images/或类似的。

的字符串化版本L.Control.prototype.options只是{"position":"topright"}.

我尝试设置L.Control.prototype.options.iconUrl = "layers.png" (and "/layers.png"）在js控制器中，然后放置手动下载的layers.png公开归档。但这既没有改变结果，也没有改变错误消息。

我的问题：

1. 如何让图标显示并消除错误？ （解决方法也可以）
2. 使用 importmap 时处理 css 文件引用的资源和资源路径的“正确方法”是什么？

任何帮助将非常感激！ Thanks!

我在使用标记时遇到了类似的问题，我的解决方案不是使用 leaflet-css，而是使用 CDN 中的 leaflet CSS