解决 img标签 :src获取静态资源 图片无法显示

news/2024/12/29 17:02:41/

背景

我专门写了一个配置项js文件,用来存放data数据,如下,文件名为photographerList.js

export default [// 摄影师{id: 0,avatr: '../images/photographers/xingyi.png',name: '邢小军',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=3bbda8c97ad8e8cf&type=1'},{id: 1,avatr: '../images/photographers/zhangxiaopeng.png',name: '张小鹏',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=7e85b5379a4e3e70&type=1'}]

html页面去v-for 然后传递给子组件。photographer 是子组件名

<div v-for="(item, index) in photographerList" :key="index" style="display: inline-block" class="list-box"><photographer :photographer="item"></photographer>
</div>

在子组件里动态绑定;src用来获取图片

<img :src="photographer.avatr" class="photographer-container-avart">

问题

图片却无法显示

解决

获取静态资源,要在js里先require获取,解决如下:

export default [// 摄影师{id: 0,avatr: require('../images/photographers/xingyi.png'),name: '邢小军',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=3bbda8c97ad8e8cf&type=1'},{id: 1,avatr: require('../images/photographers/zhangxiaopeng.png'),name: '张小鹏',adress: '上海',price: 2800,introductionUrl: 'https://www.alltuu.com/photoplatform/photoplatformResume/?id=7e85b5379a4e3e70&type=1'}]

http://www.ppmy.cn/news/691223.html

相关文章

充电识别过程及QC2.0

一、BC1.2 1.Data Contact Decect DCD机制使用了向D提供的电流源Isp_src来检测PD连接host&#xff08;SDP&#xff09;后&#xff0c;数据信号的连接。 PD检测VBUS有效&#xff08;>Votg_sess_vld&#xff09;.PD使能D上的电流源IDP_SRC和D-线上的下拉电阻Rdm_dwn.PD检测…

将GEE输出的影像批量导入指定的Google drive文件夹

参考的文章&#xff1a; 1.https://github.com/gee-hydro/gee_monkey 2.https://gis.stackexchange.com/questions/290771/batch-task-execution-in-google-earth-engine 需要将GEE处理好的影像输出&#xff0c;目前只在网上找到了批量输出到Google drive的教程&#xff0c;但…

走进音视频的世界——视频封装格式

音视频的时长怎么获取&#xff0c;音视频的封面怎么获取&#xff0c;音视频的格式怎么获取呢&#xff1f;这些信息都以特定格式存储在文件开头或者结尾&#xff0c;称为多媒体信息或者多媒体元数据。通用的封装格式由&#xff1a;文件标识头多媒体信息音视频(字幕)轨视频帧索引…

RTMP、RTSP、m3u8、flv 区别及含义

RTMP 与 RTSP 是比较常见的两种流媒体协议。 流媒体协议是一种用于通过 Web 传递多媒体的协议。 每次观看直播或点播视频时&#xff0c;背后的技术就是流媒体协议。 RTMP 英文全称&#xff1a;Real Time Messaging Protocol 中文意思&#xff1a;实时消息协议 底层协议&#xf…

夸克缓存视频合并小工具

原理 使用windows的命令行的copy命令来合并 copy /b 0123 new.ts 分析缓存目录结构&#xff0c;发现都是一个m3u8文件带一个同名文件夹 所以分析m3u8并把原来的路径换成这个缓存文件夹路径并按顺序合并即可。 其中碰到的难点是Qprocess在windows不好使&#xff0c;索性直接…

UC缓存的php格式视频,UC缓存视频变成本地mp4_下载视频怎么转换mp4_我的下载站

7条解答 1.uc缓存视频怎么转mp4 您好&#xff0c;很高兴为您服务&#xff01; 安卓版的UC浏览器&#xff0c;缓存的为vdat&#xff0c;保存在UCDownloads/videodata这个文件夹里边&#xff0c;可以直接重命名让后将格式更改为mp4或者avi即可。 如果仍有问题&#xff0c;请您继续…

《无人机培训手册》样书及PDF部分内容

《无人机培训手册》样书 PDF部分内容

如何将 DAT 转换为 MP4

文章目录 如何使用Movavi DAT 文件转换器&#xff1f;如何免费的将 DAT 文件转换为MP4&#xff1f;如何在线使用 DAT-to-MP4 转换器&#xff1f;什么是DAT文件&#xff1f;常见问题 12 best ways to convert DAT to MP4 123apps: online video converter 需要访问外网才能打开 …