if-emoji lookup table with Vue

Question

I'm using the npm module if-emoji to detect whether a user can view emojis or not. There is a similar tool in Modernizr.

If the user can't view emojis, I'm displaying an image of the emoji instead. So my Vue HTML looks like this:

<h2 v-if="this.emojis">😄</h2>
<h2 v-if="!this.emojis"><img src="https://example.com/emoji.png">/h2>

Does this still download the image for users who can view emojis, therefore using bandwidth unecessarily?

And is there a more efficient way of doing this, so that I don't need to go and add v-if every time I use an emoji? Can there be some sort of lookup table, if there's an emoji and !this.emojis?

Answer 1

You can solve this also by creating your own vue.component

<emojiorimage usesmily="false" smily="?" imgpath="https://i.stack.imgur.com/QdqVi.png"></emojiorimage>

that capsulates the decision if image or smily inside itself.

  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    components: { "emojiorimage" : {
      template : `
        <h2>
          usesmily is {{usesmily}}<br/>
          <div v-if="usesmily === 'true'">{{ smily }}</div>
          <div v-else><img :scr="imgpath" width="50" height="50" :alt="imgpath" /></div>
        </h2>`,
      props: ["usesmily", "smily", "imgpath"],
    }}
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
   <h1>Emoji or Image</h1>
 
  <emojiorimage
    usesmily="false"
    smily="?"
    imgpath="https://i.stack.imgur.com/QdqVi.png"
  ></emojiorimage>
 
  <emojiorimage
    usesmily="true"
    smily="?"
    imgpath="https://i.stack.imgur.com/QdqVi.png"
  ></emojiorimage>
</div>

You can then feed it the isemoji from your npm package that you query once and store somewhere.

---

For seperate vue files it would look kind of like this:

emojiorimage.vue

<template>
  <h2>    
    <div v-if="usesmily === 'true'">{{ smily }}</div>
    <div v-else><img :scr="imgpath" width="50" height="50" 
        :alt="imgpath" /></div>
  </h2>
</template>

<script>
export default {
  props: ["usesmily", "smily", "imgpath"],
};
</script>

App.vue

<template>
  <div id="app">
    <h1>Emoji or Image</h1>

    <emojiorimage
      usesmily="false"
      smily="?"
      imgpath="https://i.stack.imgur.com/QdqVi.png"
    />

    <emojiorimage
      usesmily="true"
      smily="?"
      imgpath="https://i.stack.imgur.com/QdqVi.png"
    />
  </div>
</template>

<script>
import emojiorimage from "./components/emojiorimage.vue";

export default {
  components: {
    emojiorimage,
  },
};
</script>

index.html

<div id="app"></div>

index.js

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  template: "<App/>",
  components: { App }
});

to get:

Learning resources:

• https://v2.vuejs.org/v2/guide/components.html
• https://v2.vuejs.org/v2/guide/single-file-components.html

Answer 2

This should work as well:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<h2 v-if="true">?</h2>
<h2 v-else><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" width=15 height=15></h2>

<h2 v-if="false">?</h2>
<h2 v-else><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" width=15 height=15></h2>

The v-if part only is part of the sourcecode if the statement is true - else the else statement is in instead. If the img tag is not part of the loaded source the image wont be loaded.

Answer 3

<h2 v-if="emojis">?</h2>
<h2 v-else><img src="https://example.com/emoji.png"></h2>

Is probably the only way to improve your code as @Patrick Artner pointed out.

You do not need this. in the template

To the question if the image is loaded if it is not shown the simple answer is no. Vue only renders v-ifs when they are needed and does not render it - the image is loaded only if !emojis.

Answer 4

Thanks to @PatrickArtner who posted the idea of using a Vue component to render the emoji / image. Here is my final solution, which resizes the emoji / image to fit the surrounding text — it uses fitty to resize the emojis, and sets the images to height:1em;.

Emoji.vue

<template>
  <div class="emojiContainer">
    <span id="fittyEmoji" v-if="emojis">{{ insert }}</span>
    <img v-if="!emojis" :src="insert" class="emojiImage">
  </div>
</template>

<style scoped>
  .emojiContainer {
    display: inline;
  }
  .emojiImage {
    height:1em;
  }
</style>

<script src="fitty.min.js"></script>

<script>

import fitty from 'fitty';
import ifEmoji from 'if-emoji'

export default {
  name: 'Emoji',
  props: ['name'],
  data: function() {
    return {
      insert: "",
      emojis: false,
    }
  },
  methods: {
    insertEmoji(){
      var names = ['frog', 'fire']
      var emojis = ['?','?']
      var urls = ['https://example.com/frog.png',
                  'https://example.com/fire.png']
      if (this.emojis) {
        this.insert = emojis[names.indexOf(this.name)];
      } else {
        this.insert = urls[names.indexOf(this.name)];
      }
      fitty('#fittyEmoji')
    }
  },
  beforeMount() {
    if (ifEmoji('?')) {
      this.emojis = true;
    } else {
      this.emojis = false;
    }
    this.insertEmoji();
  }
}
</script>

Then in your parent components you can just insert like this:

<template>
  <div id="app">
    <h1><Emoji name='frog'/> Frog Facts</h1>
    <p>Lorem ipsum <Emoji name='fire'/><p>
  </div>
</template>

<script>
import Emoji from '@/components/Emoji.vue'

export default {
  components: {
    Emoji,
  },
};
</script>