• 在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";

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue字典怎样取键值，vue项目的字典常见问题怎样解决

  目录vue数据字典取键值vue项目的字典问题在utils中写一个dict.js的文件在main.js中引用刚才封装好的getDict方法之后我们就可以在系统中使用vue数据字典取键值首先：项目里的数据字典路由已经配好进入项目页面引入数据字典import { getTypeValue } from @/api/dict/

• Angular使用SASS样式的方法是什么样的？

  Angular项目中怎么使用 SASS 样式？下面本篇文章给大家介绍一下Angular 中 SASS 样式的使用方法，希望对大家有所帮助！

• vue中如何定义私有过滤器，相比全局过滤器有何不同

  这篇文章主要介绍的是 vue定义私有过滤器和基本使用，下面文章围绕vue定义私有过滤器的相关资料展开内容,需要的朋友可以参考一下，希望对大家有所帮助

• vue中怎么实现图片放大缩小的按键功能并可拖曳

  这篇文章主要为大家详细介绍了vue图片拖拉转放大缩小组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• jQuery中eq有何作用，用法是什么？

  jQuery中eq有何作用？有一些新手对于jQuery中eq是什么可能不是很清楚，其实eq的用处有表示eq()选择器和eq()遍历，那么具体的用法是什么呢？文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。