vue绑定图片路径,vue获取图片使用绝对路径

　　本文主要介绍vue如何在数据中引入图片的正确路径，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　介绍数据中图片的正确路径。1.通过导入引入路径。2.通过需求使其更加方便。3.通过requirevue引入图片路径问题，实现ui上的直接动态。方法1和2

在data中引入图片正确路径

　　今天的坑就分享到这里。

　　本来想在横版中遍历图片，在vue中做轮播，结果发现数据中直接引入路径无法渲染。

　　原因是webpack打包无法解析。

1.通过import引入路径才行

　　如果src=就没有问题././assets/images/top5.png 直接在模板上传递。

　　你不能直接把”././assets/images/top5.png 导入到数据中，否则webpack包无法解析。

　　需要通过导入来导入，然后放入数据。

　　可以呈现如下

　　模板

　　div class=大顶

　　 img alt= v-for=(item，index)in gotop :key= index :src= item

　　/div

　　//模板

　　脚本

　　从导入前5名././assets/images/top5.png

　　从导入前4名././assets/images/top4.png

　　从导入top3././assets/images/top3.png

　　从导入top2././assets/images/top2.png

　　从导入top1././assets/images/top1.png

　　导出默认值{

　　名称：“动画”，

　　data() {

　　返回{

　　gotop:[

　　top5，

　　top4，

　　top3，

　　top2，

　　top1，

　　]

　　}

　　/scriopt

2.通过require更方便

　　将数据中a的值定义为1可以动态改变要切换的画面。

　　要求(`年./works/assets/$ { this . a } . png `)；

3.在ui上直接动态也要通过require

　　 li v-for=(i，a)in imgs :key= a aimg:src= require(././assets/ i 。png) alt=/a/li

vue引入图片路径问题

方法一

　　把你的图片源文件直接放在项目目录的静态或者公共文件夹里，然后像正常的图片路径一样写。

方法二

　　当文件被放置在asset中时，路径需要被转换成编译和打包的路径。

　　如果直接用在img标签或者css中，可以直接引入路径，打包。

　　但如果作为字符串使用，则需要以请求或导入的形式引入，加入打包行列。

　　imageUrl:需要(././assets/logo . png’)

　　导入img自././assets/logo . png ；

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。