想要通过图像名称来展示从数据库获取的图像。

huangapple go评论85阅读模式
英文:

Want to show the image that i get from db as by its name

问题

Your provided code is in English, but you've requested a translation. Here's the translated code:

问题是我上传的图像被设置在数据库中,并保存在VS Code的uploads文件夹中,但我不知道如何在前端显示它们。我尝试了一些方法,但需要进一步了解该过程。

<script>
  axios
    .get("http://localhost:8000/hotels")
    .then((response) => {
      console.log(response.data)
      for (let i = 0; i < response.data.length; i++) {
        document.getElementById('data').innerHTML += `<tr class="odd">
          <td class="dtr-control sorting_1" tabindex="0">${response.data[i].id}</td>
          <td><img src='${response.data[i].image}'></td>
          <td>${response.data[i].name}</td>
          <td>${response.data[i].description}</td>
          <td>${response.data[i].price}</td>
          <td>${response.data[i].address}</td>`;
      }
    })
    .catch((error) => {
      console.log(error);
    });
</script>

在这里,您可以看到,当我上传数据时,图像存储在uploads文件夹中,我们只需找到一种方法在前端显示图像即可。

英文:

SO my problem is images that i upload are set in the database and saves in vs code in uploads folder but i dont know how to display them on front end i have tried something but furthur needs to know the procedure

 &lt;script&gt;
                      
  axios
    .get(
      &quot;http://localhost:8000/hotels&quot;)
    .then((response) =&gt; {
      console.log(response.data)
      for (let i = 0; i &lt; response.data.length; i++) {
              document.getElementById(&#39;data&#39;).innerHTML+=`&lt;tr class=&quot;odd&quot;&gt;
                      &lt;td class=&quot;dtr-control sorting_1&quot; tabindex=&quot;0&quot;&gt;${response.data[i].id}&lt;/td&gt;
                      &lt;td&gt;&lt;img src=&#39;${response.data[i].image}&#39;&gt;&lt;/td&gt;
                      &lt;td&gt;${response.data[i].name}&lt;/td&gt;
                      &lt;td&gt;${response.data[i].description}&lt;/td&gt;
                      &lt;td&gt;${response.data[i].price}&lt;/td&gt;
                      &lt;td &gt;${response.data[i].address}&lt;/td&gt;`                                         
      }
     
  })
  
    .catch((error) =&gt; {
      console.log(error);
    });

                      &lt;/script&gt;

So here you can see when i upload data the images are stored in the uploads folder All we need is to display image on front end somehow

答案1

得分: 1

您的/uploads文件夹不像其他路由一样被托管。您需要托管它以解决URL。

编辑:解释
在您的app.js/index.js(您已初始化app()的位置)中编写以下代码:

const path = require('path')
app.use('/uploads',
  express.static(path.join(__dirname,
    'uploads')))

我也认为这个问题类似于如何使用Node.js提供图像的问题。

英文:

Your /uploads folder is not hosted like other routes. you need to host it in order to resolve the URL.
Here is how you can using express.

EDIT: Explanation
In your app.js/index.js(where you have initialized app())
write the code below

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const path = require(&#39;path&#39;)
app.use(&#39;/uploads&#39;,
  express.static(path.join(__dirname,
    &#39;uploads&#39;)))

<!-- end snippet -->
Also i believe the question is similar to How to serve an image using nodejs

答案2

得分: -3

你可以使用以下代码替代:

&lt;td&gt;&lt;img src=&#39;${new URL(&quot;uploads/&quot;+response.data[i].image, window.location.origin).toString()}&#39;&gt;&lt;/td&gt;
英文:

You can use instead of

&lt;td&gt;&lt;img src=&#39;${response.data[i].image}&#39;&gt;&lt;/td&gt;

this line

&lt;td&gt;&lt;img src=&#39;${new URL(&quot;uploads/&quot;+response.data[i].image, window.location.origin).toString()}&#39;&gt;&lt;/td&gt;

huangapple
  • 本文由 发表于 2023年1月5日 18:12:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75016825.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定