问题

I am making a HTML website that takes an input in the id userInput and was wondering how to take it apart and insert images for the length of userInput

Say for example the userInput = Hello World
Ideally it would output the images h.png e.png l.png l.png o.png space.png w.png o.png r.png l.png d.png

As I do not have the files of each individual letter, I am unable to show how it would ideally look, but hopefully you can help me! Though I know that the font disregards capitals.

Thank you once more!

答案1

得分: 1

你只需要编写一些JavaScript代码来将输入字符串转换为数组，然后遍历该数组，创建一个包含<img>标签的HTML字符串。

document.querySelector('input').addEventListener('input', evt => {
  document.querySelector('.normal-output').innerHTML = evt.target.value;
  const a1 = Array.from(evt.target.value);
  const a2 = [];
  a1.forEach(e1 => {
    e2 = (e1 == ' ' ? 'space' : e1);
    a2.push(`<img src="https://donald.au/bugs/so-76709587/${e2}.png">`);
  });
  document.querySelector('.image-output').innerHTML = a2.join('');
});

body, input {font-family: sans-serif; font-size: 16px;}
.image-output img {height: 100px;}

<p>
  <input type="text" value="abc">
</p>
<p class="normal-output">abc</p>
<p class="image-output">
  <img src="https://donald.au/bugs/so-76709587/a.png">
  <img src="https://donald.au/bugs/so-76709587/b.png">
  <img src="https://donald.au/bugs/so-76709587/c.png">
</p>

document.querySelector('input').addEventListener('input', evt => {
  document.querySelector('.normal-output').innerHTML = evt.target.value
  const a1 = Array.from(evt.target.value)
  const a2 = []
  a1.forEach(e1 => {
    e2 = (e1 == ' ' ? 'space' : e1)
    a2.push(`<img src="https://donald.au/bugs/so-76709587/${e2}.png">`)
  })
  document.querySelector('.image-output').innerHTML = a2.join('')
})

body, input {font-family: sans-serif; font-size: 16px;}
.image-output img {height: 100px;}

<p>
  <input type="text" value="abc">
</p>
<p class="normal-output">abc</p>
<p class="image-output">
  <img src="https://donald.au/bugs/so-76709587/a.png">
  <img src="https://donald.au/bugs/so-76709587/b.png">
  <img src="https://donald.au/bugs/so-76709587/c.png">
</p>

答案2

得分: 0

我有一个解决方案

HTML

  <button onclick="generateImages()">生成图像</button>
  <div id="imageOutput"></div>

JS

function generateImages() {
  var userInput = document.getElementById('userInput').value;
  var imageOutput = document.getElementById('imageOutput');
  imageOutput.innerHTML = '';

  for (var i = 0; i < userInput.length; i++) {
    var character = userInput[i].toUpperCase();
    var image = document.createElement('img');
    image.src = character === ' ' ? 'FONT/SPACE.png' : 'FONT/' + character + '.png';
    imageOutput.appendChild(image);
  }
}
```

<details>
<summary>英文:</summary>

I have a solution

HTML
```  &lt;input type=&quot;text&quot; id=&quot;userInput&quot; placeholder=&quot;Enter text&quot; /&gt;
  &lt;button onclick=&quot;generateImages()&quot;&gt;Generate Images&lt;/button&gt;
  &lt;div id=&quot;imageOutput&quot;&gt;&lt;/div&gt;
```

JS
```
function generateImages() {
  var userInput = document.getElementById(&#39;userInput&#39;).value;
  var imageOutput = document.getElementById(&#39;imageOutput&#39;);
  imageOutput.innerHTML = &#39;&#39;;

  for (var i = 0; i &lt; userInput.length; i++) {
    var character = userInput[i].toUpperCase();
    var image = document.createElement(&#39;img&#39;);
    image.src = character === &#39; &#39; ? &#39;FONT/SPACE.png&#39; : &#39;FONT/&#39; + character + &#39;.png&#39;;
    imageOutput.appendChild(image);
  }
}
```

</details>



# 答案3
**得分**: -1

要在HTML中将每个字母显示为其各自的图像，您可以为每个字母使用“img”标签，并将“src”属性设置为相应图像的URL。

在此示例中，每个字母（A、B、C）将由其各自的图像表示。请将“src”属性中的图像URL替换为您要用于每个字母的实际URL。

请确保通过提供的URL或相对路径访问图像文件，如果您在本地托管图像。此外，考虑为每个图像使用适当的替代文本（“alt”属性），以确保可访问性并提高SEO。

<details>
<summary>英文:</summary>

To display each letter as its individual image in HTML, you can use the &quot;img&quot; tag for each letter and set the &quot;src&quot; attribute to the URL of the corresponding image.

In this example, each letter (A, B, C) will be represented by its respective image. Replace the image URLs in the &quot;src&quot; attribute with the actual URLs of the images you want to use for each letter.

Remember to make sure that the image files are accessible via the provided URLs or the relative paths if you&#39;re hosting the images locally. Additionally, consider using appropriate alternative text (&quot;alt&quot; attribute) for each image to ensure accessibility and improve SEO.

</details>