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项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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答题类应用接口实例
2015/02/09 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python解释执行原理分析
2014/08/22 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python让函数不返回结果的方法
2020/06/22 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
大学生作弊检讨书
2014/02/19 职场文书
给老师的一封建议书
2014/03/13 职场文书
电子商务求职信
2014/06/15 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
高中生物教学反思
2016/02/20 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS