在Flex布局中，如果图片无法显示且宽度设置无效，可能是由于以下几个原因导致的。以下是一些可能的解决方案：
确保图片的路径是正确的。如果路径错误，图片将无法加载。
<img src="正确的图片路径" alt="描述">
确保图片格式是浏览器支持的格式（如JPEG、PNG、GIF等）。
确保没有其他CSS样式覆盖了图片的宽度设置。可以使用浏览器的开发者工具（如Chrome的DevTools）来检查应用的样式。
在Flex容器中，图片的宽度可能会受到Flex属性的影响。你可以尝试使用flex属性来控制图片的宽度。
.container {
display: flex;
}
img {
flex: 1; /* 图片将占据剩余空间 */
max-width: 100%; /* 确保图片不会超出容器 */
}
如果你希望图片有一个固定的宽度，可以直接设置width属性。
img {
width: 200px; /* 设置固定宽度 */
}
确保父容器有足够的空间来显示图片。如果父容器的宽度为0，图片将无法显示。
.container {
display: flex;
width: 100%; /* 确保父容器有宽度 */
}
object-fit属性如果你希望图片在容器中按比例缩放，可以使用object-fit属性。
img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片将覆盖整个容器 */
}
确保HTML结构正确，图片标签没有被其他元素错误地包裹或嵌套。
<div class="container">
<img src="正确的图片路径" alt="描述">
</div>
有时浏览器缓存可能导致图片无法显示。尝试清除浏览器缓存或使用无痕模式查看页面。
使用浏览器的开发者工具检查网络请求，确保图片资源被正确加载。
以下是一个完整的示例，展示如何在Flex布局中正确显示图片并设置宽度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Image Example</title>
<style>
.container {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
img {
flex: 1;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="正确的图片路径" alt="描述">
</div>
</body>
</html>
通过以上步骤，你应该能够解决Flex布局下图片无法显示且宽度设置无效的问题。如果问题仍然存在，建议进一步检查代码和浏览器控制台的错误信息。