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

目录
  • 在data里引入相对路径
    • 问题
    • 解决
  • 如何在data中正常引入图片路径
    • 此时有两种解决方法

在data里引入相对路径

问题

在项目的HTML中引入图片的相对路径，这样写是能找到图片显示出来的：

<img src="../../../static/img/step-ongoing.png">

但图片太多感觉太乱了了，想在data中通过变量统一管理。这时发现如果直接在data中这样写图片是找不到的：

<img :src="stepOngoing">

data()  {
    return {
        stepOngoing: '../../../static/img/step-ongoing.png',
    }
}

解决

发现只有这么写才行，require内部引入：

data()  {
    return {
        stepOnGoing: require('../../../static/img/step-ongoing.png'),
    }
}

或者用import 在外部引入：

import stepOnGoing_src from '../../../static/img/step-ongoing.png'

data()  {
	return {
		stepOnGoing: stepOnGoing_src,
	}
}

如何在data中正常引入图片路径

在Vue项目中通过data设置图片路径，然后在template中引入后页面无法显示图片，浏览器控制台报错：

刚开始以为是路径出问题了，于是绝对路径、相对路径各种办法试了一遍，发现还是报错，后来才发现这是因为在Vue里动态生成的路径无法被url-loader解析到，

此时有两种解决方法

方法一：直接将你的图片源文件放在项目目录的static文件夹里，然后和正常写图片路径那样写就可以了：

方法二：通过import的方法将图片源路径引入，如下图所示：

需要注意的是：在Vue里图片是通过v-bind绑定src属性的，所以template模板上的img标签并不是src=""，而是v-bind:src=""或简写为:src=""，如果这里写错了，那无论如何都无法正常引入图片。

方法三：采用背景图做法，通过data将图片源路径引入，利用内联样式。

如下代码所示：

        <div :style="imgStyle"></div>
        data () {
             imgStyle: {
                  backgroundImage：`url(${require('@/assets/images/xxx.png')})`
             }
        }

如此也可将图片正常引入项目中并作为背景图使用。

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

赞 (0)

相关推荐

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • vue路由相对路径跳转方式

    vue路由相对路径跳转方式

    目录 vue路由相对路径跳转 1.append 属性 2.router.resolve方法 vue router动态路由点击跳转路径地址重复追加 在练习写vue router动态路由时碰到的问题 vue路由相对路径跳转 今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法. 1.append 属性 设置 append 属性后,则在当前 (相对) 路径前添加基路径. 类型:boolean 默认值:fal

  • 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里引入相对路径

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

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

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

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

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

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

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

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

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

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

    最近在学Vue,感觉很难理解,学不懂. 昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了. 在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码) 图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样 网页上却变成了这样 于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了 但是这种方法也太蠢了,以后不能也这样办吧 就在网上查了一下,要加一个require,很多帖子里的图片路径都加了

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

  • vue项目之webpack打包静态资源路径不准确的问题

    vue项目之webpack打包静态资源路径不准确的问题

    目录 webpack打包静态资源路径不准确 问题 静态资源找不到如js文件 图片找不到 webpack中的静态资源处理 Webpacked 资源 资源处理规则 在JavaScript里获取资源路径 "真实的" 静态资源 webpack打包静态资源路径不准确 问题 1.将打包好的项目部署到服务器,发现报错说图片找不到. 2.静态资源如js访问不到 分析并且解决问题 明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了. 静态资源找不到如js文件 资源打包路径有误,打包后的资

  • 解决MYSQL连接端口被占引入文件路径错误的问题

    今天早上打算本地win7机器上用Wampserver搭建PHP环境,把自己的小程序配置上去.下载最新的wampserver 3.0.6版本安装后,发现mysql一直无法运行,以为是wampserver版本问题,随后又下载了相关2.4,2.5等相关版本安装,依旧没有解决,主要现象是mysql命令符中输入密码回车之后没有反应,随后命令符自动消失,另外就是在PHPMyAdmin中输入密码直接出现连接超时等的三条错误提示,或者是提示无法连接.后来我直接卸载了wampserver,改用phpStudy搭建

  • vue.js整合mint-ui里的轮播图实例代码

    vue.js整合mint-ui里的轮播图实例代码

    初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"

  • vue系列之requireJs中引入vue-router的方法

    requireJs简介 参数配置 requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单. require define 其中define是用于定义模块,而require是用于载入模块以及载入配置文件. define([id,deps,] callback); require(deps[,callback]); 加载配置文件 独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式: <script src="js/require.js&

随机推荐