Dynamic splicing image path in Vue2.0

We use the require method to solve the local resource image path

External resources (pictures from the server) If we use the following method, we cannot find the corresponding picture, and will treat the variable as a character directly

<div class="first-img"><img src='http://81.70.162.221:3000/${blog.image}' alt="" /></div>

Usage scenario: Get the image resource returned by the backend and render it on the page

Solution:

<template>
    <div class="first-img"><img :src="getImgUrl(content.image)" alt="" /></div>
</template>

<script>
export default {
  data() {
    return {
      content: [],
    };
  },
  created() {
    this.getArticle();
  },
  methods: {
    getArticle() {
      this.axios
        .get("/getBlog", {
          params: {
            id: this.$route.query.id,
          },
        })
        .then((res) => {
          this.content = res.data;
        });
    },
    getImgUrl(img) {
      return "http://81.70.162.221:3000/" + img;
    },
  },
};
</script>

The getImgUrl method stitches together the path and returns