[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 实现下拉选择图标,并将图标回显到选择框中

相关推荐
布局呆星9 小时前
Vue3 | 组件通信学习小结
前端·vue.js
Ruihong12 小时前
你的 Vue 3 reactive(),VuReact 会编译成什么样的 React?
vue.js·面试
Ruihong12 小时前
你的 Vue 3 ref(),VuReact 会编译成什么样的 React?
vue.js·面试
一 乐12 小时前
酒店预订|基于springboot + vue酒店预订系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·酒店预订系统
嗜好ya12 小时前
解决 Vite 项目中 import.meta.env 变量为 undefined 的问题
前端·javascript·vue.js
浩星13 小时前
「Vue3 + Cesium 最佳实践」完整工程化方案
前端·javascript·vue.js
小李子呢021113 小时前
前端八股Vue(5)---v-if和v-show
前端·javascript·vue.js
YiuChauvin14 小时前
vue2中使用 AntV G6
javascript·vue.js
踩着两条虫14 小时前
目录:VTJ.PRO 在线应用开发平台技术揭秘
vue.js·低代码·ai编程
peak_chan15 小时前
通过vue-virtual-scroller封装虚拟滚动el-select
前端·javascript·vue.js