vue如何在data中引入图片的正确路径


Posted in Vue.js onJune 05, 2022

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 


Tags in this post...

Vue.js 相关文章推荐
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
You might like
PHP生成RSS文件类实例
2014/12/05 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
javascript中call()、apply()的区别
2019/03/21 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python实现的凯撒密码算法示例
2018/04/12 Python
对python 命令的-u参数详解
2018/12/03 Python
简单了解django orm中介模型
2019/07/30 Python
python:动态路由的Flask程序代码
2019/11/22 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
大学生个人自荐信样本
2014/03/02 职场文书
村庄环境整治方案
2014/05/15 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
会计专业求职信
2014/08/10 职场文书
2014年纪检工作总结
2014/11/12 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript