×

vue每日一学:在data中引入图片正确路径

作者:andy0012022.11.01来源:Web前端之家浏览:4639评论:0
关键词:vuejs

vue每日一学:在data中引入图片正确路径。

在vue中自己做轮播,结果发现在data中直接引入路径是渲染不出来的。

原因是webpack打包无法解析

1.通过import引入路径才行

如果直接在模板上通过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>

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 :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";

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20221101.html

网友评论文明上网理性发言 已有0人参与

发表评论: