这篇“vue怎么在data中引入图片的正确路径”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么在data中引入图片的正确路径”文章吧。
今天踩的坑给分享出来。
本来想要在横版遍历图片出来在vue中自己做轮播,结果发现在data中直接引入路径是渲染不出来的。
原因是webpack打包无法解析
如果直接在模板上通过src="../../assets/images/top5.png"是没有问题的
想通过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" :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>
在data中定义a的值为1就可以动态改变要切换的图片
require(`../works/assets/${this.a}.png`);
<li v-for="(i,a) in imgs" :key="a"> <a><img :src="require('../../assets/'+i+'.png')" alt=""></a></li>
直接将你的图片源文件放在项目目录的static或public文件夹里,然后和正常写图片路径那样写就可以了
文件放在asset中,需要将路径转换为编译打包后的路径。
如果是直接在img标签或者css中使用,可以直接引入路径,打包会处理
但是如果是作为字符串的形式使用,需要使用request 或import的方式来引入,加入打包行列
imageUrl: require('../../assets/logo.png') import img from "../../assets/logo.png";
以上就是关于“vue怎么在data中引入图片的正确路径”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。