Vue2.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方法拼接好路径并返回

Vue2.0中动态拼接图片路径相关推荐

vue动态拼接图片路径、img地址拼接问题 [模板字符串]
写vue写的不多,记录一下这个小坑知识点:es6模板字符串${} (一)需求: 使用vue根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹, ...
WPF 动态更换图片路径
wpf中动态修改图片路径,其实很简单,有个小伙伴有疑问,绑定了source,为什么不能显示图片呢... 通过绑定,修改图片路径,动态显示图片,效果如下: 图片支持本地路径和网络路径,下面就来看看如何做 ...
vue2.0中的$router 和 $route的区别
vue2.0中的$router 和 $route的区别最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $rou ...
Vue-在data中引入静态图片路径
在data中引入静态图片路径首先tempate中内容都一样: <template slot="pic" slot-scope="{ row }"> ...
vue2.0中的路由传值
vue2.0中的路由传值传参的三种基本用法第一种字符串拼接 //第一步:路由表 src/router/index.js { path: '/user/:userId?', // 传参第一步:在路由 ...
vue2.0中关于active-class
vue2.0中关于active-class 一.active-class是什么, active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换: 官方文 ...
js脚本替换拼接图片路径
#js脚本,拼接图片路径 ##替换拼接页面中图片路径: -$(function () { $('img').each(function () { var imgpath = $(this).attr( ...
ASP.NET 2.0 中动态添加 GridView 模板列的...
framespacing="0" src="http://what.yesky.com/by/ztdh.htm" frameborder="0&quo ...
vue 直接访问静态图片_vue中本地静态图片路径写法
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧这里写图片描述需求:如何components里面的index.vue怎样能把assets里面的 ...

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

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

解决方法：

Vue2.0中动态拼接图片路径相关推荐

最新文章

热门文章