vue的图片需要用require的方式进行引入问题

目录
  • 图片用require方式进行引入
  • require引入的图片和直接引入的图片有啥区别

图片用require方式进行引入

在vue中，我们有时候通过动态的方式加载图片，需要require的方式进行引入图片。

html

<image :src="rightIcon" mode=""></image>            //图片
<view class="tab"  :style="tabSrc">背景图片</view>  

js

图片image

export default {
data(){
    return(){
       rightIcon: require("./image/membercenter.png")；
        tabSrc:{backgroundImage: "url(" + require("../../static/yes.png") + ")"}
       }          
  } 
}

require引入的图片和直接引入的图片有啥区别

require 是 node 中的一个方法，他的作用是 “用于引入模块、 JSON、或本地文件”。也就是说如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。 而如果使用字符串的话，那么则是一个 string 类型的固定字符串路径。

我们知道，src 中引入的图片应该为图片的本身路径（相对路径或者绝对路径），而 vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的 字符串路径则无法找到该图片，所以需要使用 require 方法来返回 图片的编译路径。

简单的说，使用require定义之后，你就可以动态使用了，不用require你就只能写死的。不用的话， :src="’…/img/image.jpg’" 会被解析为字符串

require方法介绍：http://nodejs.cn/api/modules.html#modules_require_id

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • v-for循环中使用require/import关键字引入本地图片的几种方式

    v-for循环中使用require/import关键字引入本地图片的几种方式

    目录 问题描述 方式一(后端返回图片URL) 方式二(前端使用require) 方式三(前端使用import) 总结 问题描述 我们做项目中,常常需要把图片呈现到页面上,一般来说有以下几种方式 方式一(后端返回图片URL) 这种方式就是后端返回图片的url地址,我们直接img标签的src属性绑定imgUrl即可.如下代码: <div class="item" v-for="(item, index) in apiArr" :key="index&qu

  • vue系列之requireJs中引入vue-router的方法

    requireJs简介 参数配置 requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单. require define 其中define是用于定义模块,而require是用于载入模块以及载入配置文件. define([id,deps,] callback); require(deps[,callback]); 加载配置文件 独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式: <script src="js/require.js&

  • 详解Vue.js中引入图片路径的几种方式

    vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源 例如, url(./imag

  • vue的图片需要用require的方式进行引入问题

    目录 图片用require方式进行引入 require引入的图片和直接引入的图片有啥区别 图片用require方式进行引入 在vue中,我们有时候通过动态的方式加载图片,需要require的方式进行引入图片. html <image :src="rightIcon" mode=""></image>            //图片 <view class="tab"  :style="tabSrc"

  • Vue 设置图片不转为base64的方式

    Vue 设置图片不转为base64的方式

    目录 Vue设置图片不转为base64 vue-cli 3 .vue-cli 4  版本 vue-cli 2 版本 Vue项目base64转img 输入框 效果展示 Vue设置图片不转为base64 在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64. 好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感. 坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显. vue-cli 3

  • vue实现图片滑动验证功能

    vue实现图片滑动验证功能

    图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件——npm install --save vue-monoplasty-slide-verify 注意此处的--save也就是简化版的-s,是为了将下载的插件保存到package.json中的depencedies中,这样其他人在下载你的项目后,依然可以通过npm install将插件安装到node_modul

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • Vue显示图片的几种方式小结

    目录 前言 使用原生img标签 使用ElementUI的Avatar 总结 前言 最近在做自己的项目,有这么一个需求,用户列表需要展示用户的头像,之前一直没有处理,趁着这次机会,正好分享下我的解决过程. 头像这一栏空荡荡的,我这种强迫症患者难受死! 首先声明下,我的数据列表是查询数据库接口返回的,那么我头像路径也是保存在数据库的: 我先去网上随便搜了点图片入库里面,先让他能正常展示着,后面有空了再改为通过接口动态上传展示. 使用原生img标签 我们可以直接使用img标签去实现.通过它的src属性

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

  • vue项目查看vue版本及cli版本的实现方式

    查看cli版本,执行如下: vue -V 查看vue版本 npm list vue 补充知识:vue老项目升级vue-cli3.0问题总结 升级步骤 1. 删除原vue-cli并安装vue-cli3.0 2.删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3.把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4. 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下

  • Vue+Vant 图片上传加显示的案例

    前端开发想省时间就是要找框架呀!找框架! vant中上传图片组件:https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader: <van-uploader :after-read="onRead" accept="image/*" multiple> <imgclass="head-img" src="/static/images/addpic.png&

  • Vue批量图片显示时遇到的路径被解析问题

    最近在学Vue,感觉很难理解,学不懂. 昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了. 在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码) 图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样 网页上却变成了这样 于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了 但是这种方法也太蠢了,以后不能也这样办吧 就在网上查了一下,要加一个require,很多帖子里的图片路径都加了

  • Vue实现图片与文字混输效果

    用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用 textarea 实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了 掘金 的发布沸点功能,然后就模仿了其作法,于是就有了这篇文章的分享.先给大家展示下最后实现的效果:yum: 实现思路 利用 div 的 contenteditable 属性,让div可编

随机推荐