Vue批量图片显示时遇到的路径被解析问题

 更新时间:2019年03月28日 11:07:01   作者:彳卬  
这篇文章主要介绍了Vue批量图片显示时遇到的路径被解析问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在学Vue,感觉很难理解,学不懂。

昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了。

在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码)

图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样


网页上却变成了这样

于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了


但是这种方法也太蠢了,以后不能也这样办吧

就在网上查了一下,要加一个require,很多帖子里的图片路径都加了个require,那就试试


成功! 但是不知道是什么原理,大概是把路径的字符串封装起来了?

然后又去查了查require是干啥的,感觉用过 ,但不知道哪里用过


使用位置

require是运行时调用,所以require理论上可以运用在代码的任何地方

require本质
require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量

这样的话就把路径字符串变成变量了

以上所述是小编给大家介绍的Vue批量图片显示时遇到的路径被解析问题详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue表单控件绑定图文详解

    Vue表单控件绑定图文详解

    在本文中我们给大家整理了一篇关于Vue表单控件绑定的相关知识点内容,有需要的朋友们参考下。
    2019-02-02
  • vue3 使用defineAsyncComponent与component标签实现动态渲染组件思路详解

    vue3 使用defineAsyncComponent与component标签实现动态渲染组件思路详解

    这篇文章主要介绍了vue3 使用defineAsyncComponent与component标签实现动态渲染组件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • 如何使用 Vuex的入门教程

    如何使用 Vuex的入门教程

    在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,本文主要介绍了如何使用 Vuex的入门教程,具有一定的参考价值,感兴趣的可以了解一下
    2022-02-02
  • 使用vxe-table合并单元格后增加选中效果

    使用vxe-table合并单元格后增加选中效果

    这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue组件传值方式(props属性,父到子,子到父,兄弟传值)

    Vue组件传值方式(props属性,父到子,子到父,兄弟传值)

    这篇文章主要介绍了Vue组件传值方式(props属性,父到子,子到父,兄弟传值),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vuejs实现递归树型菜单组件

    vuejs实现递归树型菜单组件

    本篇文章主要介绍了vuejs实现递归树型菜单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    最近一直在做的项目是Vue2搭建的项目,本文主要介绍了Vue全局自定义指令Modal拖拽的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue.js报错Failed to resolve filter问题的解决方法

    Vue.js报错Failed to resolve filter问题的解决方法

    这篇文章主要介绍了Vue.js报错Failed to resolve filter问题的解决方法,需要的朋友可以参考下
    2016-05-05
  • vue 解决报错问题小结

    vue 解决报错问题小结

    最近入门vue,用字节跳动的arco初始化一个项目的时候报错自己解决后没来的及截图,从别人那拷贝个网图把,是一样的报错,本文给大家分享vue 解决报错问题小结,感兴趣的朋友一起看看吧
    2023-09-09
  • vue3项目keepAlive使用方法详解

    vue3项目keepAlive使用方法详解

    keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度,这篇文章主要介绍了vue3项目keepAlive使用方法,主要将keepaliev在vue3.0中的用法,需要的朋友可以参考下
    2024-03-03

最新评论