vue绑定图片路径数据问题

最新推荐文章于 2024-04-17 14:15:20 发布
最新推荐文章于 2024-04-17 14:15:20 发布
阅读量6.3k 收藏 3
点赞数 2
分类专栏： vue学习 文章标签： vue单页开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leileibrother/article/details/78644668
版权

初次使用vue，遇到了许多小细节问题，比如data里面的静态图片路径渲染到页面上的问题，天真的我以为直接写图片的相对路径就可以了，然而失败了，我还是太嫩了，如图，

里面的图片路径无法渲染在页面上，百度了一下，基本用两种方法解决。

1、加require，如 headerImg: require('../../../assets/img/man.png')，这样就可以显示出来了。

2、把图片放在static文件夹里面，用绝对路径引入，如 headerImg: 'static/img/man.png'，这样也可以

 

还有什么好用写法吗？请多多指教

小雷雷哥哥
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue动态绑定图片和背景图
weixin_34072857的博客
09-10 476
1、动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" /> 2、动态绑定背景图 <div class="binding-bg" :style="{ 'background': 'url(' + require('.....
vue中绑定动态的图片
qq_38621169的博客
06-29 1万+
在vue中动态绑定图片还是经常会用到的，下面我来分享一下我动态绑定图片的方法在vue中绑定动态的src有一下几个步骤：一、把本地用动态绑定的图片写成数组或者对象。如下二、在组建中使用，实现动态绑定v-bind:src="";可以简写为:src。具体的写法看下面接下来我们看看效果啊如果按照我上面的写法就会出现上图的问题，图片出不来，海报404错误。解决办法：表示我们的图片要用require引进来，静...
vue动态修改图标的图片地址
最新发布
qq_27806371的博客
04-17 143
vue动态修改图标的图片地址
vue之动态绑定图片
seimeii的博客
04-27 1848
1.HTML <div class="login-item" :style="{ 'background-image': userBg }"> 2.计算属性 computed: { ...mapState(["USER", "CUSTOMCODE", "USERPERMISSIONS"]), userBg() { const url = require("../../static/image/custom/" + this.CUSTOMCODE
vue中动态绑定图片
liuqiancsdn1558的博客
07-13 1360
vue动态绑定图片
vue 动态绑定图片 ，图片数组
hddlsj的博客
04-20 2798
js 部分: Itemsrc:[ {imgUrl:require('../assets/img/detail-1.jpg'),}, {imgUrl:require('../assets/img/detail-2.png'),}, {imgUrl:require('../assets/img/detail-3.jpg'),}, {i.
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
在Vue.js框架中，动态绑定图片是常见的需求，特别是在数据驱动的应用中，图片路径可能根据用户操作或后台数据的变化而变化。本篇文章将详细介绍如何在Vue中动态绑定图片以及通过`data`对象返回图片路径的方法。 ...
解决vue的 v-for 循环中图片加载路径问题
10-18
然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，我们需要理解问题的背景。在一个实际项目中，产品...
解决Vue动态加载本地图片问题
10-16
无论选择哪种方法，确保图片路径正确且能被Vue编译或运行时解析是关键。在开发过程中，如果遇到类似问题，可以参考上述方法进行调试和解决。同时，也要注意图片资源的管理，避免项目中出现过多未使用的图片，影响...
Vue.js框架--绑定图片几种方式
分享我的点点滴滴，在成长路上与你同行！
10-08 1591
方式一：  &lt;!--注意：写src/assets/文件--&gt; &lt;img src="src/assets/logo.png" /&gt;   方式二： &lt;img v-bind:src='imgUrl' /&gt; data() { return { msg: '欢迎使用Vue.js', imgUrl: require('./ass...
Vue在data中存入静态图片地址，使用别名引入的方法
老黑
11-24 5015
在项目开发中，icons的引入遇见了麻烦 在data中存入一组图片地址，并且循环渲染到组件上 &lt;div class="icons-item" v-for="icon of list" :key="icon.type" @click="Jump(icon.type)"&gt; &lt;img class="icons-img" :src="icon.imgUr
聊聊Vue中的JSX
油墨香^-^的博客
02-28 4466
render() {},复制代码。
jsx中img标签中src属性的使用
BUG_CONQUEROR_LI的博客
09-06 1664
jsx中img标签中src属性的使用
vue图片的动态绑定
shiyibushiwei的博客
08-17 3773
vue图片的动态绑定，就是想办法给路径前边加一个require()
在vue的jsx中使用图片预览插件v-viewer
weixin_39818813的博客
06-23 392
vue v-viewer组件在jsx的使用
在Vue中使用JSX的正确姿势
热门推荐
tzllxya的博客
06-19 3万+
在Vue中使用JSX的正确姿势 ant-design-vue开源了一段时间后，收到了一些反馈，尤其是Form组件上线后，很多用户对JSX的使用感到迷惑和不习惯，为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组件的自动收集校验功能需要在JSX下使用，当然如果不需要自动收集校验，你依然可以使用template Vue 推荐在绝大多数情况下使用template来创建你的 H...
vue3变量存放本地图片
gaozhiqiang1988的博客
03-20 392
vue3变量存放本地图片
vue用变量值引用本地/网络图片
郭宝的博客
05-24 2132
用变量值引用网络图片： <template> <img :src="logo" class="sidebar-logo"> </template> <script> export default { name: 'SidebarLogo', data() { return { logo: 'https://w...
vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使
一家外包公司的码农，专职前端开发
01-20 8561
相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。 第一种：使用require引入本地图片路径。 第二种：使用远程服务器图片路径。 第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。 第一种：使用require引入本地图片路径。 <template> <div> <!-- 循环遍历data中的img数据 绑定index --&
vue 图片路径绑定data数据
08-09
在Vue中，可以将图片路径与data数据绑定，实现动态加载图片。 首先，要在data中声明一个属性，用来存储图片路径。例如，可以在data中添加一个属性名为"imageUrl"。 然后，在模板中使用v-bind指令，将该属性与图片...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值