获取 Active Storage 项目的图片网址

问题描述

从名为 doc 的模型中选择图像后，我希望图像显示在年/新页面上。图像与文档中的活动存储一起存储。

文档的 id 可用，但我不知道如何将图像放在页面上（动态）。

来自_form.html.erb

<%= simple_form_for(@year,html: { class: 'form-inputs' }) do |form| %>
  …
  <%= form.association :doc,label_method: :page_year_name__notes_content,collection: Doc.all,value_method: :id,label: "Select document" %>
  …
<% end %> 

附加到上述 years/new.html.erb _form.html.erb 页面的以下 JavaScript 捕获 doc_id 并将其写入页面。模型以年份命名，因为每个项目都针对特定日期（年份。不是最佳名称）的某个人。

const div_doc_select = 'year_doc_id'
const selectElement = document.getElementById(div_doc_select);

selectElement.addEventListener('change',(event) => {
  const doc_id = event.target.value;
  document.getElementById('show-doc').innerHTML = show_doc_id;
});

但我希望显示图像而不是 show_doc_id，因此我需要访问新创建的 @year.doc.image。以下是编辑页面上的内容，但最好将其写入新页面。

<div id="map" class="" style="width: <%= @year.doc.image.Metadata['width'] %>px; height: <%= @year.doc.image.Metadata['height'] %>px" data-url="<%= rails_blob_url(@year.doc.image) %>" data-width="<%= @year.doc.image.Metadata['width'] %>" data-height="<%= @year.doc.image.Metadata['height'] %>">Map Here</div>

年/编辑页面上的作品，这是因为 @year.doc.image 存在。并且在年/编辑上面创建

<div id="map" class="" style="width: 900px; height: 1477px" data-url="http://localhost:3000/rails/active_storage/blobs/eyJfcm…2aaf5d/documentXXX.jpg" data-width="900" data-height="1477"></div>

我不知道如何使用 JavaScript document.getElementById('show-doc').innerHTML = show_doc_id; 将图像放入的两个问题。

FWIW，div 是 map 因为我使用 OpenLayers 从图像中获取一些信息，它本质上是一个映射程序，所以我使用的是标准命名。 OpenLayers 可以轻松处理所谓的静态图像（非地理图像）。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）