Vue由本地js中存放的url地址获取图片

对象必须放在js中（而不是json里面，json没有require）。如果是在json中，需要采用其他方式去获取
注意：url地址必须用这种形式，有require

data.js

export const recommends = [{"pic": require('./1.png'),"name": "adidas 阿迪达斯 训练 男子","price": "335","num": "1"},
]

index.vue

import { recommends } from './img/recommend/recommend';

先引入

this.recommends = recommends;

然后要么在data里return这个对象，要么就采用这种赋值方式。赋值方式可以省去多余的get/set方法

<p class="recommend-pic"><img class="recommend-img" :src="item.pic"></p>
<p class="recommend-name">{{item.name}}</p>

读取对象数据，两个注意点，

src前面： (v-bind绑定)。
直接获取的参数需要两个花括号 {{ }}

Vue由本地js中存放的url地址获取图片相关推荐

springboot中根据url地址获取图片
application.yml中,配置路径: file:dir: /mnt/mfs-cli/gf/ //服务器地址#dir: E:\\Area\\anhui //本地地址在Controller文件中, ...
iOS开发中，通过URL地址获取网络上的图片
在iOS开发中,我们有时会通过图片的URL地址来获取网上的图片,下面是一个方法实现: /** 通过URL地址从网上获取图片 */ -(UIImage *) getImageFromURL:(NSStr ...
Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
[html] 怎样去除iOS和Android中的输入URL地址的控件条呢？
[html] 怎样去除iOS和Android中的输入URL地址的控件条呢? setTimeout(scrollTo,0,0,0); 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
js自动篡改页面url地址 - 场景篇
js自动篡改页面url地址 - 场景让用户感觉是多个专栏页面(更正规感) 主要代码: // 获取当前url var url = document.URL, //获取当前页面的网址信息URL;var ...
js中直接通过id名获取到这个元素
浏览器日常bug: 最近在复习javascript的时候发现了一个我还没有见过的一个有趣的东西,可能你也没有见过,所以就在这里记录一下:就是js中直接通过id名获取到这个元素,且不使用getEleme ...
通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64
本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇以下代码可直接复制使用!注意第9行的图片地址更改下 <template><div cla ...
url地址的图片路径
url地址的图片路径: (./images/1.jpg) 中的./指根路径,有或没有都可以: (../images/1.jpg) 中的../指相对路径: (../../images/1.jpg) 中的 ...
js 获取vue组件html_vue.js中怎么引入组件？
前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面本篇文章给大家介绍一下引入子组件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.j ...

Vue由本地js中存放的url地址获取图片

Vue由本地js中存放的url地址获取图片

Vue由本地js中存放的url地址获取图片相关推荐

最新文章

热门文章