Vue.js 图片不显示 | 图片资引用

最新推荐文章于 2023-08-12 18:23:33 发布

原创最新推荐文章于 2023-08-12 18:23:33 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

在Vue.js应用中遇到图片无法显示的问题，通常由于静态资源路径引用不当引起。原始问题是在data中直接使用相对路径定义图片，但在模板中显示时无效。解决方案是通过require关键字来动态引入图片资源，确保图片能正确加载。这样做可以解决静态资源路径解析的问题。

Vue.js 图片不显示

在data中定义图片的路径，在引用的时候，图片不会被显示

 {
          id:1,
          name:"李四",
          moneyCategory:"美元/钞",
          count:"6234 **** 0798",
          money:700000.00,
          logo: "../assets/img/transferManage/ic_logo_gongshang.svg",
          bankName:"东莞银行",
          lock:false
        }

这个时候在标签中引用log是不会被引用的。只需要改一下，用require来引入图片就解决了

  logo: require("../assets/img/transferManage/ic_logo_gongshang.svg")

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陈斌-cb

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

Vue 人资实战篇三主页模块 token拦截、token注入、pvg的颜色、权限拦截器、自定义指令、Token失效

m0_55170432的博客

06-01

1040

1.0 主页的token拦截处理目标：根据token处理主页的访问权限问题本节任务：完成主页中根据有无token，进行页面访问的处理 1.1 权限拦截的流程图以及流程图转化代码我们已经完成了登录的过程，并且存储了token，但是此时主页并没有因为token的有无而被控制访问权限在基础框架阶段，我们已经知道**src/permission.js**是专门处理路由权限的，所以我们在这里处理在导航守卫的位置，我们添加了NProgress的插件，可以完成进入时的进度条效果提交代码 // 权限拦截

一篇文带你使用vue完成一个完整后台

m0_67393295的博客

03-09

2116

介绍 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你 vue-element-admin定位是后台集成方案，不适合当基础模板进行二次开发，项目集成了许多用不到的功能，会造成代码沉余 vue-admin-template是一个后台基础模板，建议使

参与评论您还未登录，请先登录后发表或查看评论

vue.js src图片显示不出来

m0_37817220的博客

12-17

1074

图片能正常显示是因为经过webpack处理了，（src引用的资源变成了base64的）。这是因为vue-loader做了处理。用变量引用 var img = require(‘路径’)的方式引入资源 ...

vue.js图片无法显示问题总结

热门推荐

milli236的博客

09-24

1万+

1。data数据里的写法： js里的应该是要写成 url: require('../../assets/workbench/1.png') 如： export default { name: 'hello', data () { return { msg: 'Welcome to Yrrrrrrrf对p', visible:false,

浏览网页隐藏图片 html,网页中图片不显示问题

weixin_30305029的博客

06-03

527

问题描述网页展示时，图片不显示。其实图片已经上传到服务器，通过ftp也能够下载图片问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)界面的代码如下：商品类目:选择类目商品标题:商品卖点:商品价格:库存数量:条形码:商品图片:上传图片商品描述:商品规格:提交重置var itemAddEditor ;//页面初始化完毕后执行此方法$(function(){...

vue项目js引入图片显示不出

guochiscoding

01-05

783

错误代码：把引入路径改为： require('../../assets/img/2.jpg') 即可。原因：vue以为这是一串字符串，而不是图片路径。多踩坑才会成长呀~

JavaScript的img.src属性设置图片无法显示问题

qq_51950796的博客

06-23

1367

自己遇到的一个错误，记录下来以免再犯。

Vue如何实现动态路由以及动态路由详解

weixin_45357661的博客

01-11

2989

Vue如何实现动态路由以及动态路由详解

两小时从零学会vue-admin-template框架

drhrht的博客

03-06

8684

一、vue-admin-template 1.项目简介官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi

Vue 人资实战篇一 vue-element-admin学习，项目初始化，sass运用

m0_55170432的博客

05-31

1095

人力资源的环境搭建 1.0 vue-element-admin的了解和介绍 vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/) 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。是一个后台集成方案, 集成了PC项目中很多的业

今天遇到的IE6下jquery js将图片写入html图片不显示的问题

一名普通码农的菜地

03-03

1838

今天遇到的IE6下jquery js将图片写入html图片不显示的问题来自： http://hi.baidu.com/yorbpmgwkxbdesd/item/bed72d0f7bba4b803d42e2c0 问题截图：图片html已经插入到页面中，但是图片没有显示，IE7，火狐等浏览器都正常，要右键-“显示图片”，图片才显示，很奇怪的。

在vue.js引用图片的问题

weixin_30521161的博客

04-01

246

<div id="img"> <img src="img.png" class="img"> </div> $(".img").attr("src",require("@/img.png")); 在vue里在js中引用图片必须加一个require关键字和在图片地址前面加@符号转载于:https://www.cnblogs.com...

js html 编辑器添加图片不显示,彻底解决ewebeditor网站后台不能上传图片的方法

weixin_42384743的博客

06-05

445

经我们技术员检查，结果原来是eWebEditor文本编辑器对IE8浏览器的兼容性导致的脚本错误，并不是什么“网站空间、服务器中毒、出问题了”呢！现就将解决方法公布给大家，方便大家修正自己网站的代码以使文本编辑器在各种浏览器下都能兼容、正常使用！解决IE8不支持eWebEditor在线文本编辑器的方法如下：【1】首先在eWebEditor文本编辑器根目录下的Include目录下找到editor.j...

img保存 vue_vue.js中怎么放图片？

weixin_42305901的博客

01-17

1212

vue.js中怎么放图片？下面本篇文章给大家介绍一下vue js中添加图片的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue.js中怎么放图片？vue在js中去添加图片的方式如下：方法一：在data里面将图片路径保存好imgList: [{openItem: '../static/icon/ic_police.png'},{openItem: '../static/ic...

关于图片无法正常加载，JS解决办法合集

weixin_30901729的博客

10-25

731

问题场景：服务器图片丢失，导致页面上很多图片是无法正常加载的。解决办法：　　1.本地测试环境，图片使用本地数据　　 <img src="images/banner222.png" id="imgErr">　　//丢失的数据<img src="images/banner.png" class="imgErr">　　//正常显示　<script> 　...

vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法

demons19961019的博客

08-12

2847

vue项目js代码中输出html代码时，使用img标签引用图片不显示的解决方法，图片放置在public打包后的目录下。使用变量承载并require图片路径。此时页面图片展示不出来。

maven工程ssm框架中的jsp页面css，js，图片不显示问题

随便写写

05-31

2339

今天在写后台管理页面时，发现我的js，css还有图片不显示，于是我想记录一下问题如下：maven工程ssm框架中的jsp页面css，js，图片不显示问题或者这种（其实这俩一样）依旧不行！！！3.于是我又想到会不会又是tomcat老问题，没有把css，js，图片生产到target文件夹里于是我又去检查，发现全部都有！！ 4.我又想到会不会idea自生出了问题，于是我重启idea，发现依旧无法加载css，js还有图片。

vue 通过js引入图片的方式（解决项目线上图片无法展示的问题）

逆风优雅的博客

03-21

4319

首先将图片都引入，然后导出 import costContent_11 from '../../../assets/img/costContent_11.png' import costContent_12 from '../../../assets/img/costContent_12.png' import costContent_13 from '../../../assets/img/costContent_13.png' import costContent_14 from '../../.

Vue.js图片剪裁上传组件VueImageCropUpload介绍

标题中提到了“vueimagecropupload”，这是指一个基于Vue.js框架开发的图片剪裁上传组件，它允用户上传图片并且在上传之前对图片进行剪裁处理。组件的名称为“vue-image-crop-upload”，可以拆分为几个关键概念： -...