在Vue页面中如何更优雅地引入图片详解

目录
  • 错误示范
  • 通过computed
  • 当图片不变的时候直接引入
  • 通过css变量切换图片
  • 通过css绘制
  • 总结

在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。

错误示范

也许你的代码里常常会这样写

<template>
    <img :src="src">
</template>
<script>
    export default{
        data(){
            return {
               src: require('xxx.jpg')
            }
        }
    }
</script>

在webpack中，require会自动处理资源，这块没问题，但是你放到vue的data里，vue会遍历data，给src加上响应式，但其实大部分时间，这个src并不需要响应式，这里造成了性能浪费。

通过computed

解决上面这个错误方案，解决的方案之一：computed

<template>
    <img :src="src">
</template>
<script>
   const src = require('xxx.jpg')
    export default{
        computed:{
           src(){
             return src
           }
        }
    }
</script>

computed本身就有缓存，可以减少一些性能浪费

当图片不变的时候直接引入

<template>
    <img :src="src">
</template>

或者

<template>
    <div class="bg"></div>
</template>

<style>
 .bg{
 background:url("xxx.jpg")
 }
</style>

当我们这个图片不会变化的时候，可以直接引入，并不需要赋值一个变量。

同样，也可通过切换class名去动态显示图片，这样也比较好

<template>
    <div :class="flag ? 'bg1':'bg2'"></div>
</template>
<script>
    export default{
     data(){
            return {
               flag: true
            }
        }
    }
</script>
<style>
 .bg1{
 background:url("xxx1.jpg")
 }
 .bg2{
 background:url("xxx2.jpg")
 }
</style>

通过css变量切换图片

这个只是我刚刚想起来的一个想法，理论上css变量可以存储任何东西，那能否存放图片地址呢。

<template>
    <div class="bg"></div>
</template>
<script>
    export default{
        mounted(){
           // 第一种方法，图片地址或base64
           this.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`)
           // 第二种方法
           this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`)

        }
    }
</script>
<style>
 .bg{
     --bg:url('xxx.jpg');
     background-image:--bg;
 }
</style>

个人测试成功，这个方法也可用，而且会比computed更好些，毕竟操作css变量开销更小。这个方法需要注意的是，css中图片一般都是写在url中的，因此需要拼接一个字符串url(你的内容)。

通过css绘制

这个其实算一个题外话，有的时候一些图像其实是可以通过css画出来的,例如下图中这个三角，大家百度一下就会有各种css三角生成器，这种图形用css会比引入一个图片更好。

总结一下，就是不要在vue的data中引入图片，还是尽量使用css

总结

到此这篇关于在Vue页面中如何更优雅地引入图片的文章就介绍到这了,更多相关Vue更优雅引入图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

  • vue的三种图片引入方式代码实例

    这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先给图片地址绑定变量: <template> <img :src="imgUrl"> </template> 在script中设置变量: //方法1:直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2:把imgUrl放

  • Vue页面中引入img图片的方法

    我们在学习html的时候,图片标签<img>引入图片 <img src="../assets/images/avatar.png" width="100%"> 但是这样会有2个弊端: 因为采用绝对路径引入,所以如果后面这张图片移动了目录,就需要修改代src里的路径 如果这张图片在同一页面内有多个地方要使用到,就需要引入多次,而且图片移动了目录,这么多地方都要修改src路径 怎么办?使用动态路径import.require 首先讲讲这两个兄弟,

  • 在Vue页面中如何更优雅地引入图片详解

    在Vue页面中如何更优雅地引入图片详解

    目录 错误示范 通过computed 当图片不变的时候直接引入 通过css变量切换图片 通过css绘制 总结 在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢.这里我讲一下我常用的方法. 错误示范 也许你的代码里常常会这样写 <template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xx

  • Vue页面切换和a链接的本质区别详解

    Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转,这和传统的<a href="path" rel="external nofollow" ></a>何其相似!但它们到底有什么具体的区别呢? 对比<a>,Link组件

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发 首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-

  • Swift开发应用中如何更方便地使用颜色详解

    前言 春节期间做了一款新的产品OneScreen,总结了学习Swift开发以来的一些技巧,今天为大家带来一个方便调取颜色.更好使用颜色.随时修改颜色的技巧. 主要涵盖的内容是: 1.通过扩展,使用十六进制颜色码标记颜色 2.构建自定义的颜色/样式,在各页面中方便调用 3.在后续UI调整中,只需要调整一个文件即可预览全局 实际上,2.3的技巧类似于之前分享过的多主题解决方案. 一.使用十六进制颜色码 在开发OneScreen中,首先创建了ExtensionFile.swift文件,如下的代码可以实

  • 如何利用Proxy更优雅地处理异常详解

    如何利用Proxy更优雅地处理异常详解

    代码不会全部按照我们的预期运行,可能会有意料之外的情况,为了保证程序的健壮性,要进行异常处理. 比如一个对象的所有方法,都应该做异常处理,但是,如果每个方法都加 try catch 又太麻烦: const obj = { aaa() { try { // aaa } catch(e) { // xxxx } }, bbb() { try { // bbb } catch(e) { // xxxx } }, ccc() { try { // ccc } catch(e) { // xxxx } }

  • Asp.NET页面中事件加载的先后顺序详解

    Asp.NET页面中事件加载的先后顺序详解

    本文主要给大家介绍了关于Asp.NET页面事件加载先后顺序的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: ASP.NET 母版页和内容页中的事件 我们知道母版页和内容页都可以包含控件的事件处理程序.对于控件而言内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会从内容页发送到母版页,也不能在内容页中处理来自母版页控件的事件,它们只会在自己事件内部进行处理. 下面是母版页(Master)与内容页(ContentPage)合并后事件的发生顺序:

  • vue项目中v-model父子组件通信的实现详解

    vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

随机推荐