有输入图像域没有任何输入图像

Question

我正在构建一个 Web 应用程序，我正在尝试将我的 own 模型实例添加到默认图像字段的位置，但我没有找到任何 ImageField。

问题

页面显示 ImageField，但我没有找到任何 image field in template。

models.py

class Image(models.Model):
    user = models.ForeignKey(User,on_delete=models.CASCADE)
    file = models.ImageField()

  /* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
  import('https://elements.stoumann.dk/assets/js/css-filter.mjs')
    .then(module => {
    const jsClass = module.default;
    elements.forEach(element => {
      new jsClass(element, element.dataset, presets);
    });
  })
}

const presets = [
  {
  "name": "watercolor",
  "description": "",
  "value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
  "values": [
    {
      "brightness": 1.3,
      "invert": 0.17,
      "saturate": 2.6,
      "sepia": 0.25,
      "url": "url('#squiggly-1')"
    }
  ]
},
{
  "name": "faded-photo",
  "description": "",
  "value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
  "values": [
    {
      "blur": 0.2,
      "brightness": 1.1,
      "hue-rotate": 5,
      "opacity": 0.9,
      "saturate": 1.3,
      "sepia": 0.40
    }
  ]
},
{
  "name": "old-horror",
  "description": "",
  "value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
  "values": [
    {
      "url": "url('#grain')",
      "grayscale": 1,
      "sepia": 0.5,
      "brightness": 1.3,
      "invert": 0.8
    }
  ]
},


];

<div data-js="filter"

    >
    </div>

我认为名为 https://elements.stoumann.dk/assets/js/css-filter.mjs 的模板中的 url 是 externel` js。但是我如何在 externel js 中进行更改？

我尝试了什么：-

我尝试放置很多 link，但对我没有任何作用。

当我尝试替换 link 时，浏览器中的所有内容都消失了。

如有任何帮助，我们将不胜感激。

如果有人知道它为什么显示以及我该如何删除它，请帮助，我将非常感谢您的帮助。

Answer 1

要添加默认图像字段，您可以将 previewImage 参数与您的图像路径一起传递。即使您有外部 js，它也允许您传递自定义参数并在构造函数执行期间使用它。只需添加如下属性 data-preview-image 或参考 link:

 /* The main module for this is external. */
const elements = document.querySelectorAll('[data-js="filter"]');
if (elements.length) {
  import('https://elements.stoumann.dk/assets/js/css-filter.mjs').then(module => {
        debugger;
    const jsClass = module.default;
    elements.forEach(element => {
      new jsClass(element, element.dataset, presets);
    });
  })
}

const presets = [
  {
  "name": "watercolor",
  "description": "",
  "value": "url('#squiggly-1') brightness(1.3) invert(0.17) saturate(2.6) sepia(0.25)",
  "values": [
    {
      "brightness": 1.3,
      "invert": 0.17,
      "saturate": 2.6,
      "sepia": 0.25,
      "url": "url('#squiggly-1')"
    }
  ]
},
{
  "name": "faded-photo",
  "description": "",
  "value": "blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9) saturate(1.3) sepia(0.4)",
  "values": [
    {
      "blur": 0.2,
      "brightness": 1.1,
      "hue-rotate": 5,
      "opacity": 0.9,
      "saturate": 1.3,
      "sepia": 0.40
    }
  ]
},
{
  "name": "old-horror",
  "description": "",
  "value": "url('#grain') grayscale(1) sepia(0.5) brightness(1.3) invert(0.8)",
  "values": [
    {
      "url": "url('#grain')",
      "grayscale": 1,
      "sepia": 0.5,
      "brightness": 1.3,
      "invert": 0.8
    }
  ]
},


];

<div data-js="filter" data-preview-image="https://img.icons8.com/cute-clipart/2x/google-logo.png">
    </div>

注： codepen 上有一个完整的外部 js 示例，你可以参考 link: https://codepen.io/stoumann/pen/MWeNmyb

有输入图像域没有任何输入图像

There is input image field without any input image

javascript

html

mjs