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. O-MVLL:支持ARM64的基于LLVM的代码混淆模块

    O-MVLL介绍 O-MVLL的开发灵感来自于另一个著名的基于LLVM的代码混淆项目ollvm,并在其基础上做了创新和改进.O-MVLL的混淆逻辑实现方式也是通过LLVM Pass,支持也仅会支持AR ...

  2. Graph Neural Network——图神经网络

    本文是跟着李沐老师的论文精度系列进行GNN的学习的,详细链接请见:零基础多图详解图神经网络(GNN/GCN)[论文精读] 该论文的标题为<A Gentle Introduction to Gra ...

  3. 7、解决swagger测试接口报错:TypeError: Failed to execute ‘fetch‘ on ‘Window‘: Request with GET/HEAD method cannot have body

    一.Swagger报错: 1.报错类型: TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method ...

  4. nginx: [emerg] "auth_basic" directive is duplicate

    错误信息 nginx: [emerg] "auth_basic" directive is duplicate in phpmyadmin.conf:14 nginx: confi ...

  5. Socket爬虫:Python版

    简述:较为底层的爬虫实现,用于了解爬虫底层实现的具体流程,现在各种好用的爬虫库(如requests,httpx...等)都是基于此进行封装的. PS:本文只作为实现请求的代码记录,基础部分不做过多阐述 ...

  6. [C++]std::sort()函数使用总结

    函数声明 template< class RandomIt, class Compare > constexpr void sort( RandomIt first, RandomIt l ...

  7. 02-Sed语法介绍

    1 Sed语法介绍 介绍Sed支持的基本命令及其命令行语法,Sed可以通过以下两种形式进行调用: 学习sed命令使用之前,需要掌握正则表达式的用法. sed [-n] [-e] 'commands' ...

  8. File的概述-File类的静态成员变量

    File的概述 java.io.File类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 构造方法 public File(String pathname)︰通过将给定的路 ...

  9. centos7连接WIFI

    centos7图形化界面可以直接连接WIFI,命令行会稍麻烦一些 环境: 1.笔记本安装centos7,没有很大的流量,基本都是交互 2.桌子后面的线路太乱,想要省去一根网线 过程: 1.安装软件 y ...

  10. 文献阅读01:由I类HLA转录缺失导致的联合免疫治疗的获得性癌症耐药性

    背景 Merkel cell carcinoma:梅克尔细胞癌又名皮肤小梁状癌.原发性皮肤神经内分泌癌.皮肤原发性小细胞癌及皮肤APUD瘤. HLA:MHC基因产物在不同细胞表面表达,通常称之为MHC ...