通用Windows平台下如何实现Combo Box与Image的关联？

核心逻辑是建立ComboBox选项值和图片资源的映射关系，监听ComboBox的选中变更事件，触发时根据当前选中值拿到对应图片路径/资源，更新Image组件的显示内容即可，具体步骤如下：

• 提前准备好「ComboBox选项值-对应图片资源」的映射表，键可以是选项的value/显示文本，值为图片的本地路径、资源ID或者占位URL
• 给ComboBox绑定选中变更事件的监听器
• 事件触发时，读取当前ComboBox选中的目标值，从映射表中取出对应的图片资源
• 将Image组件的显示源更新为取出的图片资源即可

1. 前端Web场景（HTML+原生JS） #

<!-- 下拉选择框 -->
<select id="comboBox">
  <option value="cat">猫咪</option>
  <option value="dog">狗狗</option>
  <option value="bird">小鸟</option>
</select>
<!-- 图片展示区域 -->
<img id="showImg" src="" alt="对应展示图" style="width: 300px; margin-top: 20px;">

// 1. 建立选项值和图片资源的映射
const imgMap = {
  cat: "./local-imgs/cat.jpg",
  dog: "./local-imgs/dog.jpg",
  bird: "./local-imgs/bird.jpg"
}
const comboBox = document.getElementById("comboBox")
const showImg = document.getElementById("showImg")
// 2. 初始化默认显示第一个选项对应的图片
showImg.src = imgMap[comboBox.value]
// 3. 绑定选中变更事件
comboBox.addEventListener("change", () => {
  // 更新图片源
  showImg.src = imgMap[comboBox.value]
})

2. 桌面端场景（Python PyQt5为例） #

from PyQt5.QtWidgets import QApplication, QWidget, QComboBox, QLabel, QVBoxLayout
from PyQt5.QtGui import QPixmap
import sys

class DemoWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()
        
    def initUI(self):
        self.setWindowTitle("ComboBox联动图片")
        self.resize(400, 300)
        layout = QVBoxLayout()
        
        # 1. 创建ComboBox并添加选项
        self.combo_box = QComboBox()
        self.combo_box.addItems(["猫咪", "狗狗", "小鸟"])
        # 2. 创建图片展示容器
        self.img_label = QLabel()
        self.img_label.setFixedSize(300, 200)
        # 3. 建立选项和图片路径的映射表
        self.img_map = {
            "猫咪": "./imgs/cat.jpg",
            "狗狗": "./imgs/dog.jpg",
            "小鸟": "./imgs/bird.jpg"
        }
        
        # 初始化显示第一张图
        self.update_img()
        # 4. 绑定选中变更事件
        self.combo_box.currentTextChanged.connect(self.update_img)
        
        layout.addWidget(self.combo_box)
        layout.addWidget(self.img_label)
        self.setLayout(layout)
        
    def update_img(self):
        # 读取当前选中值，更新图片
        current_text = self.combo_box.currentText()
        pixmap = QPixmap(self.img_map[current_text])
        self.img_label.setPixmap(pixmap.scaled(self.img_label.size()))

if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = DemoWindow()
    win.show()
    sys.exit(app.exec_())

内容的提问来源于stack exchange，提问作者Shashank Singh