[element-plus] el-select 下拉选择图片

html 复制代码
<el-select v-model="imgName" >
  <template #prefix>
  	<img :src="getImageUrl(imgName)" v-if="imgName"/>
  </template>
  <el-option v-for="item in imgNameList" :label="item" :value="item">
    <div class="option-container">
      <img src="item.imgName"/>
    </div>
  </el-option>
</el-select>
javascript 复制代码
const imgNameList = ref([
	{
		id:1,
		imgName:'tupian'
	}
])


function getImageUrl(name:string) {
  return new URL(`.../assets/images/${name}.png`, import.meta.url).href
}

参考:

vue3 img :src 动态引入图片

【Vite + Vue3】ElementPlus el-select 实现下拉选择图标,并将图标回显到选择框中

相关推荐
千叶寻-2 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
小*-^-*九2 小时前
Electron vue项目 打包 exe文件2
javascript·vue.js·electron
若无_4 小时前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js
ikun778g7 小时前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
我是日安7 小时前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan20158 小时前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立8 小时前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
爱泡脚的鸡腿8 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
小狮子安度因9 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse