vue 关于图片路径的问题】的更多相关文章

在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-bind去动态绑定呢,正常思路来说 我会这样写,但是在webpack中 他会被当成一个字符串来处理,并不会转换为图片的路径 <img src="src"/> export default { name: 'index', data () { return { imgsrc2: '…
一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发现通过require了路径之后可以正常显示. 但是这样感觉还是不太好,因为我不想声明怎么多变量.于是就成了这样: 先把图片通过import导入,前面的../../直接改成 @ 就可以了,然后就可以通过上面图片这样的设置来显示了. 如果是要动态的话可以在方法里面通过this点属性来修改它:…
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1.找到 config->index.js里面,如下修改 2.找到 build->utils.js,在里面加入一句publicPath:'../../', 配置修改完成,接下来,使用有两种方式,这里一般和文件结构有关,下面是我的文件结构下的使用 1.图片资源放在 assets->img文件夹下…
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="js/vue.js"></script></head><body><div id="vm1"><big…
<el-table :data="leftPage.datas" style="width: 100%"  @selection-change="handleSelectionChange1">                                             <el-table-column type="selection"  width="55"></…
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' //添加这句话 }) } else { return ['vue-style-loader'…
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo.png" alt=""> 2.app.vue  <style>中引入图片 body {background: url('../static/img/back5.jpg');} 3.组件行间样式引入背景图片 <div style="backgro…
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:                        刚开始以为是路径出问题了,于是绝对路径.相对路径各种办法试了一遍,发现还是报错,后来才发现这是因为在Vue里动态生成的路径无法被url-loader解析到,此时有两种解决方法:         方法一.直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:                          …
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPublicPath 中的'/'成为'./' 2.在build => util.js 里找到ExtractTextPlugin.extract增加一行:publicPath: '../../',主要解决背景图片路径的问题.…
  大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子组件,从而设置不同的图片路径 1.子组件实现 <div class="customerIntroduce-left"> <!-- 父组件传入图片路径 --> <img :src=image_path /> </div> export defa…