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. 什么是JS?JS的用途?

    一.JavaScript是什么?它有什么作用? JavaScript是一种运行在客户端的脚本语言,简称JS,属于解释性语言.它是一行翻译执行完以后再进行下一行,代码不进行预编译. JavaScript ...

  2. 痞子衡嵌入式:我被邀请做贸泽电子&与非网联合推出的《对话工程师》节目嘉宾

    <对话工程师>是「贸泽电子」赞助.「与非网」制作的一档网络节目,自2022年11月起,邀请不同技术领域的资深工程师,聊聊开发过程中的经验感悟,栏目共 10 期,痞子衡有幸被邀请做了第 4 ...

  3. 快速体验,学习lua(一种可嵌入c++,c#,android,object-c等并进行互调支持热更新的脚本)的入门调试系列(3)

    --这里是注释 --[[ 功能备注:lua快速体验,学习,了解语法(调试,类似try-catch) 创建时间:2020-6-27 创建人:pcw --]] print("---------- ...

  4. [深度学习] CCPD车牌数据集介绍

    CCPD是一个大型的.多样化的.经过仔细标注的中国城市车牌开源数据集.CCPD数据集主要分为CCPD2019数据集和CCPD2020(CCPD-Green)数据集.CCPD2019数据集车牌类型仅有普 ...

  5. [Leetcode]在排序数组中查找元素的第一个和最后一个位置

    题目 代码 class Solution { public: vector<int> searchRange(vector<int>& nums, int target ...

  6. [数据结构]普里姆(Prim)算法生成最小生成树

    前提介绍:最小生成树概念 一个连通图的生成树是图的极小连通子图,它包含图中的所有定点,并且只含尽可能少的边,这意味着对于生成树来说,就砍去使生成树变成非连通图:若给它怎家一条边就会形成图中的一条回路. ...

  7. Mac上离线安装rvm

    上github下载rvm,https://github.com/rvm/rvm.git. 双击打开/bin/rvm-installer .../Users/ccy/.rvm/ is complete. ...

  8. 狂神的springboot课程员工管理系统

    文章目录 springboot-kuangshen 介绍 功能展示 登陆页面 首页 员工管理页面 添加员工信息 删除员工信息 修改员工信息 参考资料 springboot-kuangshen 介绍 狂 ...

  9. 图文并茂基于阿里云linux服务器部署nodejs项目并添加pm2守护nodejs项目运行进程(Linux version 4.19.81-17.1.al7.x86_64)

    首先你要有一台LINIX服务器,登入以后按下面步骤执行命令,可查看系统版本以及配置 查看Linux 内核 通过 uname -a 命令查看系统位数是64位 x86_64表示64位系统, i686 i3 ...

  10. 【Oculus Interaction SDK】(三)限制可操作物体的移动 / 旋转

    前言 这篇文章是[Oculus Interaction SDK]系列的一部分,如果发现有对不上的对方,可以回去翻看我之前发布的文章,或在评论区留言.如果文章的内容已经不适用于新版本了,也可以直接联系我 ...