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

相关推荐
伟大的兔神5 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
Flynt7 小时前
我扒了Fantastic-admin 6.0的源码,聊聊"AI时代版本答案"这个称号
vue.js·ai编程·cursor
码艺-Alimjan9 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
风月说与山鬼11 小时前
十二、Vue插件
前端·vue.js
风月说与山鬼17 小时前
四、浏览器存储
前端·vue.js
阿懂在掘金17 小时前
记录四年前的一次前端项目权限方案改造
前端·vue.js·架构
禁止摆烂_才浅17 小时前
Vue2 高频面试题
前端·vue.js·面试
禁止摆烂_才浅17 小时前
Vue3 高频面试题
前端·vue.js·面试
独立开阀者_FwtCoder17 小时前
这次更新:换新主题,同时把好计划分享出去
前端·javascript·vue.js
资源大佬星 课it1 天前
重学C++ ,重构你的C++知识体系
vue.js·docker·django