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

目录
  • 在data中引入图片正确路径
    • 1.通过import引入路径才行
    • 2.通过require更方便
    • 3.在ui上直接动态也要通过require
  • 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";

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue 解决data中定义图片相对路径页面不显示的问题

    vue在data中定义图片相对路径: data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用vant的标签栏自定义图标: <van-tabbar v-model="active"> <van-tabbar-item inf

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

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

    目录 在data中引入图片正确路径 1.通过import引入路径才行 2.通过require更方便 3.在ui上直接动态也要通过require vue引入图片路径问题 方法一 方法二 在data中引入图片正确路径 今天踩的坑给分享出来. 本来想要在横版遍历图片出来在vue中自己做轮播,结果发现在data中直接引入路径是渲染不出来的. 原因是webpack打包无法解析 1.通过import引入路径才行 如果直接在模板上通过src="../../assets/images/top5.png"

  • vue实现在data里引入相对路径

    vue实现在data里引入相对路径

    目录 在data里引入相对路径 问题 解决 如何在data中正常引入图片路径 此时有两种解决方法 在data里引入相对路径 问题 在项目的HTML中引入图片的相对路径,这样写是能找到图片显示出来的: <img src="../../../static/img/step-ongoing.png"> 但图片太多感觉太乱了了,想在data中通过变量统一管理.这时发现如果直接在data中这样写图片是找不到的: <img :src="stepOngoing"

  • 详解Vue.js中引入图片路径的几种方式

    vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源 例如, url(./imag

  • Vue如何在CSS中使用data定义的数据浅析

    Vue如何在CSS中使用data定义的数据浅析

    1.考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2.使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性 <template> <div> <div class="box" :data-content="obj.desc"

  • 解决vue打包css文件中背景图片的路径问题

    vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路径成了却出现404访问不到的问题. 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is speci

  • react 项目中引入图片的几种方式

    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片 我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件,然后就可以直接写

  • vue在index.html中引入静态文件不生效问题及解决方法

    本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • laravel+vue组合的项目中引入ueditor方式(打包成组件形式)

    前言:最近写东西需要用到ueditor,并且需要是在vue组件中引入. (本博客默认你已经配置了laravel+vue的项目环境,如果还没有配置好的的小伙伴,可以看看我的另一篇文章,链接: https://www.jb51.net/article/122369.htm) 1.下载editor 这个直接去ueditor的官网下载其PHP版本的就可以了,没什么好说的 2.移到项目目录中(主要讲如何放置配置文件和静态资源文件) 打开下载好的ueditor目录,如果版本没有错也没出什么问题,应该就会看到

随机推荐