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. Vue快速上门(2)-模板语法

    VUE家族系列: Vue快速上门(1)-基础知识 Vue快速上门(2)-模板语法 Vue快速上门(3)-组件与复用 01.模板语法 1.1.template模板 <template>是H5 ...

  2. QT如何设置模态窗口、qss中的image丢失、进程自杀、任务日志、命令行中文乱码

    1.设置模态窗口 对窗口设定属性如下: this->setWindowModality(Qt::WindowModal); 注意模态窗口只对父窗口生效,在建立窗口的时候要注意,如果不是指针也可以 ...

  3. Python报SyntaxError: Missing parentheses in call to ‘print’. Did you mean print()

    SyntaxError: Missing parentheses in call to 'print'. Did you mean print()原因:python2.X版本与python3.X版本输 ...

  4. JavaScript:对象:如何读取、添加、删除对象的属性?

    如何给对象添加属性? 直接对象名.属性名去添加属性 直接对象名[属性名]去添加属性,此时属性名得是字符串类型,可以直接引号,也可以用变量名 如何读取对象的属性值? 这个操作,和添加属性是一样的,即用点 ...

  5. WCH以太网相关芯片资料总结

    网络产品线产品分类 1.接口控制类.CH395Q           http://www.wch.cn/search?t=all&q=395CH395LCH392F            h ...

  6. [机器学习] PCA (主成分分析)详解

    转载于https://my.oschina.net/gujianhan/blog/225241 一.简介 PCA(Principal Components Analysis)即主成分分析,是图像处理中 ...

  7. Mariadb对数据库和表的操作

    登录mariadb: 路径切换到bin下 mysql -u root -p 然后会提示输密码 新建数据库: create database demo; 其中demo为数据库名字 新建表 create ...

  8. yolov8-tensorrt加速

    仓库(已更新源码): https://github.com/FeiYull/tensorrt-alpha 仓库简介:基于CUDA+TensorRT实现深度学习加速,支持前处理.后处理.推理在GPU上运 ...

  9. python基础练习题 经常更新

    小练习 1.打印出jason l1 = [11, 22, 'kevin', ['tony', 'jerry', [123, 456, 'jason']]] # print(l1[3][2][2]) l ...

  10. Linux c 程序自动启动自己

    在程序自动升级的时候需要自己重新启动自己 #include <stdio.h> #include <stdlib.h> #include <unistd.h> in ...