开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js动态添加img不显示图片

在JavaScript中动态添加<img>元素而不显示图片，可能由多种原因引起。以下是基础概念、常见原因及其解决方法：

基础概念

动态添加图片通常涉及创建一个<img>元素，设置其src属性，并将其插入到DOM中。例如：

const img = document.createElement('img');
img.src = 'path/to/image.jpg';
document.body.appendChild(img);

常见原因及解决方法

图片路径错误
- 原因：指定的图片路径不正确，导致浏览器无法找到图片资源。
- 解决方法：确保src属性中的路径正确，可以使用绝对路径或相对路径。检查文件名和扩展名是否正确。
- 解决方法：确保src属性中的路径正确，可以使用绝对路径或相对路径。检查文件名和扩展名是否正确。

跨域资源共享（CORS）问题
- 原因：如果图片来自不同的域，且服务器未正确设置CORS头，浏览器会阻止加载图片。
- 解决方法：确保图片服务器设置了适当的CORS头，如Access-Control-Allow-Origin: *。如果无法修改服务器设置，可以考虑将图片托管在同一域下。
图片加载顺序
- 原因：在图片完全加载之前尝试显示，可能导致图片不显示。
- 解决方法：使用onload事件确保图片加载完成后再进行操作。
- 解决方法：使用onload事件确保图片加载完成后再进行操作。
样式问题
- 原因：CSS样式可能隐藏了图片，如display: none;或visibility: hidden;。
- 解决方法：检查相关CSS样式，确保图片没有被隐藏。
- 解决方法：检查相关CSS样式，确保图片没有被隐藏。
JavaScript执行时机
- 原因：如果脚本在DOM加载完成之前执行，可能导致无法正确插入图片。
- 解决方法：将脚本放在<body>底部，或使用DOMContentLoaded事件确保DOM已加载。
- 解决方法：将脚本放在<body>底部，或使用DOMContentLoaded事件确保DOM已加载。
浏览器缓存问题
- 原因：有时浏览器缓存可能导致旧的或错误的图片显示不出来。
- 解决方法：尝试清除浏览器缓存，或在src属性中添加一个随机参数以强制重新加载。
- 解决方法：尝试清除浏览器缓存，或在src属性中添加一个随机参数以强制重新加载。

应用场景

动态添加图片常用于：

图片懒加载
根据用户交互动态展示图片
动态生成内容，如从服务器获取图片URL后显示

总结

要解决JavaScript动态添加<img>元素不显示的问题，建议按照以下步骤排查：

确认图片路径是否正确。
检查是否存在CORS限制。
确保图片加载完成后再进行DOM操作。
查看CSS样式是否影响图片显示。
确保脚本在DOM加载完成后执行。
清理浏览器缓存或强制重新加载图片。

通过系统地检查上述各个方面，通常可以找到并解决图片不显示的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

若img标签图片加载失败,显示某固定图片

把下面代码复制到前面(放到所有图片标签的后边) $(function(){ $("img").attr("onerror...","slnotimg();"); $("img").each(function(){ this.src = this.src; });...}); function slnotimg() { var img = event.srcElement; img.src = "..../img/load.svg";//若加载失败显示的图片 img.onerror = null; } 需引入jq typecho里需要改代码才能用这个方法

1.9K1 0

Vue中显示img图片，显示不出来怎么办？vue显示图片

1、近期在学习Vue中发现了一个难点就是显示图片img> 试了很多办法都不行，有的还保错。后来我找了很多人，以及网上找资料终于被我给找到了。...2、如何你是一个普通组件的话，那么这样就可以了 img src="...../assets/images/fk.jpg" width="100%"> 上面这种是写死的，下面让我们试试进行动态显示；或者这样写也可以： return { imgUrl:require(.../是访问不到的，那么可以试试使用下面 @代替 src目录 require(“@/assets/images/xxx.jpg”) 以上都不行，试试更换图片存放目录到 static 文件中查询效果 ==...》 Vue显示图片发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151977.html原文链接：https://javaforall.cn

9.8K1 0

处理img标签加载图片失败，显示默认图片简单代码分享

常规方法解决我们都知道，img标签支持onerror事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。...例如这样使用： img src="img01" onerror="javascript:this.src='img02';"> 但是，注意哦，这里有个大坑哦，如果 img02 也不存在，则会继续触发...而且，就算图片存在，但网络很不通畅，也可能触发 onerror 。...img = event.srcElement;img.src = "img02";img.onerror = null;} 代码测试测试图存在，测试图正常显示 function...= null; } 测试图不存在，自动替换显示加载图 function slnotimg() { var img = event.srcElement; img.src = "https://web-static.q6q.cc

4.3K2 0

js动态添加div

问题有没有遇到过这样的需求, 在页面上会有不定个input, 点击添加按钮就添加 ?...把他封装起来, 需要的时候调用就好了思路因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收点击第一行的添加...点击的时候, 将div准备好, 添加到内容div中的第一个点击每行的添加将div添加到当前点击行后面一个点击每行删除删除当前div 实现基本思路很简单, 只要在每个点击按钮上添加对应的点击事件...我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML,...attr('name'); $(this).attr('name', name + '_' + secp); }); var _this = this; // 给添加按钮添加点击事件

24.5K4 0

JS动态添加表单

–js实现添加一行内容!...–js实现删除一行内容!效果如下图所示–!...onclick=”submit”/> 原文：http://lizongwei.blog.163.com/ 下面部分是点击按钮显示隐藏内容

13.8K6 0

网站添加显示IP信息图片

根据访客ip自动生成一张包含多种信息的图片，包含：地理位置、当前日期、ip地址、终端操作系统、浏览器版本。使用方法放在弹出公告或者侧边栏，可自行修改高度。...调用示例一可自行修改高度 img src="https://api.azpay.cn/814/1.php" height="150"> 效果图调用示例二可自行修改高度 img src="https

1.9K4 0

js 动态添加元素

该例子的样式用的是easyui的样式，看不懂只需把class="easyui-XXX" 删除即可 <div class="fitem" id="urls" st...

19.7K1 0

OpenCV图片动态特效显示（一）--展开显示

——《微卡智享》本文长度为3033字，预计阅读8分钟前言最近在规划自己的学习路径，大概又有了一个新的方向，正好最近抽着空做一些OpenCV的基础的小练习，图片的动态特效展示就是用了最简单的函数来做了一些效果...从右向左，从下到上的效果也可以根据这样我们来实现，当然到这来说基本的这样显示就已经完成了，像文章开始那个同时展示的效果实现，我们就是把这几个方式封装起来了，然后使用C++11中的future的多线程方式呈现了出来...封装函数 //垂直方向显示 direction 0-从上到下 1-从下到上 2-从左向右 3-从右向左 void directionshow(Mat src, int width, int height...tmpsrc.copyTo(dst2); // imshow("dst2", dst2); // waitKey(1); //} waitKey(0); return 0; } //垂直方向显示

2.7K5 0

H5 img标签图片无法显示 -- 解决方案

如果你也曾复制过一些类似腾讯、百度等各大网站的文章，你会发现黏贴下来发表之后经常出现图片无法显示，这是怎么出现的呢？...例如： img src="http://upload.techweb.com.cn/2017/0106/1483690985396.jpg" /> 解决方案使用...Referer有时也被用作防盗链，即下载时判断来源地址是不是在网站域名之内，否则就不能下载或显示，很多网站，如天涯就是通过Referer页面来判断用户是否能够下载图片。...如果页面中包含了如下 meta 标签，则从当前页面中发起的 http请求将只携带 origin 部分（注：根据原文中的语境，我理解这里的 origin 是包含了 schema 和 hostname 的部分 url，不包含

2.6K2 0

vb添加GIF动态图片

众说周知，GIF格式动画文件具有小巧、制作方便等特点，因此在网上得到广泛应用，在vb的picturebox和image控件添加图片后变成静止的了，这给我们设计VB应用程序带来了不便。...通过学习方法特别很多，而且并没有多麻烦：一、最简单的方法 1、在picturebox控件中添加gif格式图片首先、需要注册，注册方法：在工程中选中“引用”→引用项目ActiveMovie...其次、'在PictureBox控件中显示GIF动画（图片）,凡有句柄hwnd的窗体控件均可以；在窗体Form1上添加2个命令按钮Command1,Command2和1个图片框控件Picture1。...其次、在窗体Form1上添加2个命令按钮Command1,Command2和1个图片框控件image1 （1）、在代码窗口的通用段添加： '调用运动图像类型库Quartz.dll,在c:\windows...三、最麻烦的方法用PictureBox控件或Image控件或窗体的背景图片来显示动的图片，可以考虑用Timer控件使每隔一定的时间就更改一次控件的Picture属性来切换控件的图片以达到动画的效果。

1.2K1 0

js 画布与图片的相互转化(canvas与img)

使用js将图片拷贝进画布 //将图片对象转化为画布，返回画布 function ImageToCanvas(image) { var canvas = document.createElement("...image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0);//0, 0参数画布上的坐标点，图片将会拷贝到这个地方...return canvas; } 使用js将画布转化为图片 //将画布转化为图片 function canvasToImage(canvas) { var image = new Image();...image.src = canvas.toDataURL("image/png"); //在此处也可以使用js的appendChild()方法将此img加入html页面 //return image

4.2K2 0

JS动态添加删除css文件

1、动态添加css文件，js写法 function loadStyles (file) { var fileref = document.createElement("link") fileref.setAttribute.../test.css') 2、动态添加css文件，jq写法 function addStyle(file){ $('head').append('') } 3、动态删除css文件 function removeStyles (file) { var filename = file

6392 0

原生js动态添加元素

charset="UTF-8"> 原生js...动态添加元素 .phone { width: 200px; height: 30px;...; inputPhone.value = "请输入手机号码"; formId.appendChild(inputPhone); // js...动态添加li var ul = document.getElementById("parentUI"); var li = document.createElement(

6.8K2 0

解决 PyCharm 无法显示动态图片

Tools -> Python Scientific -> 取消勾选默认在右侧 tool window 展示，即下图所示取消勾选后，会弹出新窗口展示图片，此时动图就有效果了本文作者：

3.1K2 0

HTML img src图片路径不存在，则显示一张默认图片的方法

我们一般会给图片设置 alt 属性，当图片路径不存在时可以显示提示文字。 img src="" alt="图片加载失败"> 如图所示： ?...但是这样很不好看，如果用在文章列表，我们可以给 img 标签设置一个 onerror 属性，可以在 src 路径不存在时显示指定的默认图片。...测试一下，我没有给 src 设置图片链接，代码如下： img src="" onerror="this.src='img/error.png'"/> 显示效果如图： ?

7.2K1 0

OpenCV图片动态特效显示（三）-- 平移显示及拉伸显示效果

上图中可以看到，就是使用平移实现的效果，其实这个和我们第一章的显示不同就在于，我们展开的显示，垂直方向全是从上到下的显示，只不过先显示头部还是底部，同理从左到右，和从右到左也是全部从左边开始显示。...窗口位置显示 ? 微卡智享前面两章动画时我们imshow的显示位置在过程一中还要自己手动鼠标点一下，这次我在单元里又封装了一个给显示图片窗体定位的函数。...窗体定位代码 //显示窗口设置 //参数 img 显示的图像源， // winname 显示的窗口名称, // pointx 显示的坐标x // pointy 显示的坐标...y void setshowwindow(Mat img, string winname, int pointx, int pointy) { //设置显示窗口 namedWindow(winname..., WindowFlags::WINDOW_NORMAL); //设置图像显示大小 resizeWindow(winname, img.size()); //设置图像显示位置 moveWindow

1.8K2 0

iOS给图片添加滤镜&使用openGLES动态渲染图片

给图片增加滤镜有这两种方式: CoreImage / openGLES Cirelmage 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片...[filterTwo setDefaults]; 18 19 [filterTwo setValue:@(1.0f) forKey:kCIInputAngleKey]; //如果不增加这行新增的滤镜不会生效...的相关设置 #6.开始渲染并显示图片参考代码如下: 1 //导入要渲染的图片 2 UIImage *showImage = [UIImage imageNamed:@"hua.jpeg"]...glkView.drawableHeight) 29 fromRect:[ciImage extent]]; 30 31 [glkView display]; 如果要动态渲染..., 可以通过UISilder动态调整一下代码的vaule值 [filter setValue:vaule forKey:kCIInputIntensityKey];

2K6 0

原生JS动态添加、删除元素&内容

整理一下原生 js 添加及删除元素和内容的相关知识，供参考。... 刀是我拿的，人是我杀的一个容器，用来放添加的元素。一个button按钮，用来动态的操作DOM。...初始js代码： var container = document.getElementById("container"); var Element = document.getElementById("...} 添加元素：在元素内添加内容：文本内容 innerText container.innerText = '追加的内容'; HTML内容 innerHTML container.innerHTML...("h3");//创建一个html标签 ele.appendChild(text);//在标签内添加文字 container.appendChild(ele);//将标签添加到页面中删除元素：移除元素

27.4K4 0

cssjshtml vue.js 动态添加class

"; margin-left: 10px; } 动态...v-bind:class="compClasses"> Brownwang js.../vue.min.js"> new Vue({ el: "#vue-app", data: { changeColor

8K2 0

WordPress 评论区添加图片代码并自动显示

在functions.php里添加//评论加图片add_action('comment_text', 'comments_embed_img', 2);function comments_embed_img...($comment) { $size = auto; $comment = preg_replace(array('/\[img\]((http|https):\/\/\S*)\[\/img...\]/'),'img src="$1" alt="评论" style="width:'....$size.'" />', $comment); return $comment;}在评论区添加的代码如下：[img]在这里填写图片链接[/img]

3551 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭