Vue2.0中动态拼接图片路径

最新推荐文章于 2024-04-16 15:00:00 发布

DJ欣

最新推荐文章于 2024-04-16 15:00:00 发布

阅读量1.9k

点赞数 1

分类专栏：学习笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_52479225/article/details/126623988

版权

学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本地资源图片路径我们用require的方法解决

外部资源（来自服务器的图片）我们如果使用以下方式则无法找到对应图片，会把变量当成字符直接处理

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

使用场景：获取后端返回的图片资源并渲染到页面上

解决方法：

<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>

getImgUrl方法拼接好路径并返回