vue+webpack中,可以使用require
imageList: [
{
url: require('../image/pig.png')
}
]
vue+vite没有require方法
// 静态图片一般放在src/assets下面 1. 单个文件
import pig from '@/assets/images/pig.png' <img :src="pig " /> 2. 多个文件 new URL() + import.meta.url
vite文档: https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url
1. 在utils中创建一个方法getImage.js
// 获取assets静态资源
const getAssetsFile = (url) => {
return new URL(`../assets/deliveryStrategyImages/${url}`, import.meta.url).href;
};
export default getAssetsFile;
2. 使用
        import getAssetsFile from '@/utils/getImage';
        iconImg: [
        {
          img: getAssetsFile('oneDeployment.svg'),
        },

vue中引入静态图片的更多相关文章

  1. Vue中引入静态JS文件(爬坑)

    前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-ad ...

  2. vue中显示静态图片怎么引用

    有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...

  3. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

  4. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  5. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  6. 【jsp】怎么在jsp文件中引入静态文件(.js .css)

    如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下 ...

  7. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  8. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  9. vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误

    在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...

  10. vue-cil和webpack中本地静态图片的路径问题解决方案

    1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...

随机推荐

  1. Linux 系统用户文件缺失造成“bash-4.2$”错误的解决办法

    一.问题出现的原因 造成这个现象的原因是因为用户文件夹下的bash_logout.bash_profile和bashrc这三个隐藏文件缺失 二.问题复现 现在删除这三个文件 此时问题出现了 三.问题解 ...

  2. IIS服务没有Windows身份验证

    解决方法: 1.打开 C:\Windows\servicing\Packages,查找文件Microsoft-Windows-IIS-WebServer-AddOn-2-Package~31bf385 ...

  3. AVM 拖动组件 movable-view 介绍

    应用开发中拖动功能是比较常见的 ,如滑动解锁,滑动验证码,实现一些小游戏,少儿编程中常见. avm.js 是多端开发框架,一套代码可同时编译为APP .小程序.h5. avm 框架中实现拖动功能非常简 ...

  4. Hadoop详解(02)Hadoop集群运行环境搭建

    Hadoop详解(02)Hadoop集群运行环境搭建 虚拟机环境准备 虚拟机节点数:3台 操作系统版本:CentOS-7.6-x86-1810 虚拟机 内存4G,硬盘99G IP地址分配 192.16 ...

  5. python进阶之路20 正则表达式 re模块

    正则表达式前情 案例:京东注册手机号校验 基本需求:手机号必须是11位.手机号必须以13.15.17.18.19开头.必须是纯数字 '''纯python代码实现''' # while True: # ...

  6. Hash table集合-练习_计算一个字符串中每个字符出现次数

    Hash table集合 java.util.Hashtable<K,V>集合implements Map<K,V>接口Hashtable:底层也是一个哈希表,是一个线程安全的 ...

  7. 获取对象的方式-Calendar类的常用成员方法

    获取对象的方式 java.utiL.calendar类:日历类caLendar类是一个抽象类,里边提供了很多操作日历字段的方法(YEAR.MONTH.DAY_OF_MONTH.HOUR )CaLend ...

  8. Java JDK Proxy和CGLib动态代理示例讲解

    简介 代理模式在Java中有很多应用场景,而代理又分静态代码和动态代理.静态代理是编写.编译或加载时织入代码实现,而动态代理则在运行时实现.简单而言,静态代理是在运行前就已经存在,而动态代理则在运行时 ...

  9. 文盘Rust -- 给程序加个日志

    作者:贾世闻 日志是应用程序的重要组成部分.无论是服务端程序还是客户端程序都需要日志做为错误输出或者业务记录.在这篇文章中,我们结合[log4rs](https://github.com/estk/l ...

  10. Kubernetes(k8s)控制器(三):ReplicationController

    目录 一.系统环境 二.前言 三.ReplicationController概览 四.ReplicationController工作机制 五.创建ReplicationController 六.扩展r ...