vue 关于图片路径的问题
在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的
<img src="../assets.1.jpg"/>
如果我要用v-bind去动态绑定呢,正常思路来说 我会这样写,但是在webpack中 他会被当成一个字符串来处理,并不会转换为图片的路径
<img src="src"/> export default {
name: 'index',
data () {
return {
imgsrc2: '../assets/1.jpg'
}
}
}
正确的写法
imgsrc2: require('../assets/1.jpeg')
如果图片路径不是本地静态图片 就不需要 require 啦
<template>
<div>
<img width="100" height="100" :src="imgsrc1" alt="">
<img width="100" height="100" :src="imgsrc2" alt="">
</div>
</template> <script>
export default {
name: 'index',
data () {
return {
imgsrc1: 'http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg',
imgsrc2: require('../assets/1.jpeg')
}
}
}
</script> <style scoped>
</style>
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
vue 关于图片路径的问题的更多相关文章
- vue项目图片路径问题
一般情况下我们为了能在本地显示效果,写图片路径会直接这样写,但是在实际中图片一般都是动态上传的, 所以,在vue中一般是这样的: 但是这样你会发现,图片根本显示不出来,只是显示了个图片的图标. 后来发 ...
- vue的图片路径,和背景图片路径打包后错误解决
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...
- vue实现图片路径传送
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- freemarker与vue使用图片路径获取问题,可双单引号一起使用则可
<el-table :data="leftPage.datas" style="width: 100%" @selection-change=" ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- vue图片、背景图片路径问题
vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...
- Vue如何在data中正常引入图片路径
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错: 刚开始以为是路径出问题了,于是绝对路径.相对路 ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- Vue 动态设置图片路径
大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的 本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...
随机推荐
- UVA 2290 Transmitters
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- mongoDb造数据
package mongoUtil; import com.mongodb.MongoClient; import com.mongodb.client.MongoCollection; import ...
- 将 Desktop Central 与帮助台和 OS Deployer 集成
将 Desktop Central 与帮助台和 OS Deployer 集成 Desktop Central 可以与以下应用程序集成: 帮助台 OS Deployer Asset Explorer 与 ...
- vue工程按业务路由打包,页面只加载对应资源
修改路由表:src/router/index.js import Vue from 'vue'; import Router from 'vue-router'; // 主要写法如下 const Te ...
- 通过HttpClient发起Get请求,获取Json数据,然后转为java数据,然后批量保存数据库;
Json转java所需Jar包: commons-beanutils-1.8.0.jar,commons-collections-3.2.1.jar,commons-lang-2.5.jar,comm ...
- SSM+MyBatis框架详解
- python_redis简介与安装和使用
一.简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...
- fiddler中断request,修改参数问题
fiddler正在学习阶段,遇到了一个问题,就是bpu url后,不会修改参数,今天实验了几次,总算成功了 下面写一下步骤: 1.先打开fiddler 2.打开网站,如百度,在文本框输入1,记住!不要 ...
- python计时器类
import time as t class MyTimer(): def __init__(self): self.unit = ['年', '月', '日', '时', '分', '秒'] sel ...
- STM32 HAL库的使用心得
1.I2C函数中HAL_I2C_Mem_Write和HAL_I2C_Master_Transmit有啥区别?{ 使用HAL_I2C_Mem_Write等于 先使用HAL_I2C_Master_Tran ...