vue如何在data中引入图片的正确路径
短信预约 -IT技能 免费直播动态提醒
在data中引入图片正确路径
今天踩的坑给分享出来。
本来想要在横版遍历图片出来在vue中自己做轮播，结果发现在data中直接引入路径是渲染不出来的。
原因是webpack打包无法解析
1.通过import引入路径才行
如果直接在模板上通过class="lazy" data-src="../../assets/images/top5.png"是没有问题的
想通过data里的引入路径 ，再：class="lazy" data-src绑定就不能直接把"../../assets/images/top5.png"放到data中，否则webpack打包无法解析
需要通过import引入再放到data中
如下才能渲染出来
<template>
<div class="big-top" >
<img alt="" v-for="(item,index) in gotop" :key="index" :class="lazy" data-src="item" >
</div>
<//template><script>
import top5 from "../../assets/images/top5.png"
import top4 from "../../assets/images/top4.png"
import top3 from "../../assets/images/top3.png"
import top2 from "../../assets/images/top2.png"
import top1 from "../../assets/images/top1.png"
export default {
name: 'Animations',
data() {
return {
gotop:[
top5 ,
top4 ,
top3 ,
top2 ,
top1 ,
]
}
</scriopt>2.通过require更方便
在data中定义a的值为1就可以动态改变要切换的图片
require(`../works/assets/${this.a}.png`);3.在ui上直接动态也要通过require
<li v-for="(i,a) in imgs" :key="a"> <a><img :class="lazy" data-src="require('../../assets/'+i+'.png')" alt=""></a></li>vue引入图片路径问题
方法一
直接将你的图片源文件放在项目目录的static或public文件夹里，然后和正常写图片路径那样写就可以了
方法二
文件放在asset中，需要将路径转换为编译打包后的路径。
如果是直接在img标签或者css中使用，可以直接引入路径，打包会处理
但是如果是作为字符串的形式使用，需要使用request 或import的方式来引入，加入打包行列
imageUrl: require('../../assets/logo.png')
import img from "../../assets/logo.png";以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
