首页 > 其他分享 >Vue项目中通过 avatarUrl: require('@/assets/user-avatar.png')出现required is not defined

Vue项目中通过 avatarUrl: require('@/assets/user-avatar.png')出现required is not defined

时间:2023-02-28 16:22:59浏览次数:61  
标签:Vue assets avatarUrl avatar getAssetsImge png user

参考: https://blog.csdn.net/qq_37130872/article/details/128133646

  • useImages.js
// 获取assets静态图片
export const getAssetsImge = (name) => {
    return new URL("../assets/" + name + ".png", import.meta.url).href
}
  • 使用
 <img class="user-icon" :src="`${userPicture ? userPicture : avatarUrl}`" alt="">

import {getAssetsImge} from '@/utils/useImage.js';

computed: {
  avatarUrl() {
    return getAssetsImge('user-avatar');
  }
},

标签:Vue,assets,avatarUrl,avatar,getAssetsImge,png,user
From: https://www.cnblogs.com/openmind-ink/p/17164750.html

相关文章

  • 路飞-前端vue准备工作
    目录前端全局样式清除全局js变量配置axios全局使用/cookies全局使用安装elementui前端全局样式清除创建vue脚手架搭建项目,VUE2版本在src---assets文件夹下创建css文件夹......
  • 【django-vue】前端取消默认样式 main.js配置 后端主页模块接口 跨域问题详解 项目自
    目录回顾上节课回顾今日内容1前端全局样式和js配置1.1global.css1.2settings.js1.3main.js2后端主页模块接口三种开发模式模型父类BaseModel轮播图模型类代码轮播图接......
  • ASTC——png转ASTC方法
     1、克隆代码,CMake生成工程文件,vs直接编译;https://github.com/ARM-software/astc-encoder 2、命令备份remastcenc.exe-hsetastc_command=D:\res\tps_test\pro......
  • Vue3 状态管理之pinia
    什么是Pinia在vue3之前我们最常用的状态管理就是Vuex,当然在vue3中也有相对应的Vuex的版本。但是还是推荐使用Pinia,原因有以下几点:语法简单,mutations不再存在。无......
  • 拥抱下一代前端工具链-Vue老项目迁移Vite探索
    作者:京东物流邓道远背景描述随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换......
  • vue3+openlayes实现离线地图加载
    概述OpenLayers使在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers的开发旨在进一步使用各种地理信息。它是完全免......
  • 【必看】RuoYiVuek框架-数据源动态新增、配置如此简单!
    应用场景系统用户只能访问系统配置的数据源(可动态新增修改的)RuoYiVue框架源码点我跳转实现方式1.系统提供Yml文件配置+Druid加载数据源+@DataSource注解+D......
  • Vue3 + vite + Ts + pinia + 实战
    Pinia起始于2019年11月左右的一次实验,其目的是设计一个拥有组合式API的Vue状态管理库。从那时起,我们就倾向于同时支持Vue2和Vue3,并且不强制要求开发者使用组......
  • 安装node并创建vue项目
    1.多版本管理工具 nvmhttps://github.com/coreybutler/nvm-windows/releasesnvm-setup.zip2.打开nvm文件夹下的settings.txt文件node_mirror:https://npm.taobao......
  • 路飞前台全局css,全局配置文件、安装axios、安装vue-cookies、安装elementui、安装boot
    目录1路飞前台全局css,全局配置文件1.1整理项目1.2全局css1.3全局js2安装axios3安装vue-cookies4安装elementui6安装bootstrap和jq7后台主页模块表设计8后台主页......