怎么在js中加入图片不显示不出来

在JavaScript中加入图片但图片不显示的原因有很多，主要包括文件路径错误、HTML结构问题、CSS样式冲突、浏览器缓存、文件权限问题等。 其中，文件路径错误是最常见的问题之一。确保图片文件的路径正确且文件存在是解决这个问题的关键。

文件路径错误通常发生在以下几种情况：1）图片文件被移动或删除；2）使用相对路径时，路径写错；3）文件扩展名拼写错误。为了避免这些问题，可以使用浏览器的开发者工具检查路径和请求状态。

一、文件路径错误

1、相对路径问题

在使用相对路径时，如果路径不正确，浏览器将无法找到图片文件。相对路径依赖于当前HTML文件的位置，比如：

<img src="images/picture.jpg" alt="Example Image">

如果您的HTML文件在根目录，而图片文件在"images"文件夹中，这种相对路径是正确的。如果位置不对，路径也需要相应修改。

2、绝对路径和URL

使用绝对路径或完整的URL可以更直接地定位文件。例如：

<img src="/images/picture.jpg" alt="Example Image">

或者：

<img src="http://example.com/images/picture.jpg" alt="Example Image">

这种方式避免了相对路径的困扰，但需要确保服务器上的文件结构正确。

二、HTML结构问题

1、未闭合的标签

确保HTML标签正确闭合，未闭合的标签可能导致浏览器无法解析。例如：

<!-- 错误的标签 -->
<img src="images/picture.jpg" alt="Example Image"

2、嵌套错误

图片标签嵌套在不支持嵌套的标签中也会导致显示问题。例如，将<img>标签放在<p>标签内部是可以的，但不能放在<textarea>标签中。

三、CSS样式冲突

1、隐藏样式

检查是否有CSS样式将图片隐藏，比如：

img {
  display: none;
}

2、尺寸问题

确保图片的宽高不是0，例如：

img {
  width: 100px;
  height: 100px;
}

四、浏览器缓存

1、清除缓存

有时候浏览器缓存会导致图片更新不及时。可以通过清除缓存或强制刷新页面来解决。

2、禁用缓存

在开发过程中，可以在开发者工具中禁用缓存，确保每次加载的都是最新的文件。

五、文件权限问题

1、文件权限设置

确保服务器上的图片文件具有正确的权限设置，允许浏览器读取。例如，在Linux系统上，可以使用命令chmod 644设置文件权限。

2、跨域问题

如果图片文件存储在不同的域名下，确保服务器设置允许跨域访问。设置CORS（Cross-Origin Resource Sharing）是一个常见的解决方案。

六、JavaScript动态加载图片

1、使用JavaScript设置图片

在JavaScript中，可以通过document.createElement和setAttribute动态创建和设置图片。例如：

const img = document.createElement('img');
img.setAttribute('src', 'images/picture.jpg');
img.setAttribute('alt', 'Example Image');
document.body.appendChild(img);

2、检查JavaScript错误

使用浏览器的开发者工具检查JavaScript代码是否有错误。如果代码中有错误，可能会导致图片无法正确加载。

七、推荐项目管理系统

在使用JavaScript管理项目时，选择合适的项目管理系统也很重要。推荐研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统可以帮助团队更高效地协作和管理项目，提高项目成功率。

通过以上方法，可以有效解决在JavaScript中加入图片但图片不显示的问题。确保文件路径正确、HTML结构合理、CSS样式无冲突、浏览器缓存清理干净、文件权限设置正确，以及合理使用JavaScript动态加载图片，都是解决问题的关键。