Bulma Carousel本地图片无法显示问题求助

问题根源 #

你用了本地文件系统的绝对路径（比如/Users/mac/Desktop/Asi4her/Thirdslide.jpeg）引用图片，但Web服务器会把这个路径当成网站根目录下的路径去查找，而服务器根目录和你本地桌面文件夹完全不对应，所以触发ActionController::RoutingError路由找不到的错误。

解决方案 #

1. 迁移图片到项目静态资源目录 #

• 若是Rails项目：把图片放到app/assets/images目录
• 若是普通静态HTML项目：在项目根目录新建images文件夹，将图片移入其中

2. 使用正确的引用路径 #

• 普通静态项目示例：

<div class='box'>
  <div>
    <figure class="image is-5by3">
      <img src="./images/Thirdslide.jpeg" alt="第三张轮播图" />
    </figure>
  </div>
</div>

• Rails项目示例（用asset helper）：

<div class='box'>
  <div>
    <figure class="image is-5by3">
      <%= image_tag 'Thirdslide.jpeg', alt: '第三张轮播图' %>
    </figure>
  </div>
</div>

3. 清理重复的CDN依赖 #

你的配置里重复引入了多版本的Bulma和Bulma Carousel，可能引发样式/脚本冲突，建议保留最新版本的依赖即可，比如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="../css/hero.css">
<link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@2/css/all.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@2/css/single/apple/apple.min.css" />

内容的提问来源于stack exchange，提问作者user19707340