在VueJS中使用'require'显示图像时如何保存图像链接？

Posted 2023-02-22

【中文标题】在VueJS中使用\'require\'显示图像时如何保存图像链接？

【英文标题】：How to save image link in when using 'require' to display image in VueJS?在VueJS中使用'require'显示图像时如何保存图像链接？

【发布时间】：2021-01-25 03:55:27

【问题描述】：

我正在尝试创建一个页面，在其中显示带有图像的披萨项目。 Pizza 对象以imgUrl 字段保存在数据库中。图像未显示，但我看到了我提供的 alt 文本，但我可以在控制台中看到图像链接是正确的。

现在，数据库中的 imgUrl 字段有 ../assets/images/pizza.jpg 这样的数据。我应该将require(../assets/images/pizza.jpg) 保存在数据库中吗？这看起来很奇怪。这是代码，请看mounted方法。

<template>
  <div>
    <div class="class">
      <span><h1>All you can eat Menu.</h1></span>
      <div class="container">
        <div class="box" v-for="item in pizzaList" :key="item.id">
          <div>
            <img :src="item.imgUrl" />
              <div>
                <a class="btn" @mouseenter="$event.currentTarget.style.background = '#EF6B7F'"
                @mouseleave="$event.currentTarget.style.background = '#e31837' ">Buy Now</a>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default 
  data () 
    return 
      pizzaList: []
    
  ,
  mounted: function () 
    axios.get('http://localhost:8081/api/pizza/all')
    .then(response => 
      this.pizzaList = response.data;
    )
    .catch(e => 
      console.log(e);
    )
  

</script>

我已经读过了 Vue and API: Displaying Image Image path in Vue JS How to reference static assets within vue javascript

但是这些答案告诉我们当我们硬编码url时如何做，我们应该用require封装它但是他们没有告诉我们什么时候从数据库中获取链接，我们如何放置require在 html 标签中。 我希望我的问题很清楚。如果您需要，请询问详细信息。谢谢

【问题讨论】：

你在使用 Vue CLI 吗？

***.com/a/64208406/381282

是的，它是 Vue CLI。有效。非常感谢！！

【参考方案1】：

它不工作的原因是因为

Webpack's require() needs at least some part of the file path to be completely static and we should "make only part of the path dynamic"

这意味着您不能将整个图像路径放在数据库中并在 UI 中将其传递给 require 并期望它能够正常工作

我换了

<img :src="require(`$item.imgUrl`)" />

其中 item.imgUrl = '../assets/entities/pizza/pizza_1.jpg'（即相对于组件的整个图片路径）

通过

<img :src="require(`../assets$item.imgUrl`)" />

其中 item.imgUrl = '/entities/pizza/pizza_1.jpg'

Michal Levy 在 cmets 中提到的这个答案解释了这一切 https://***.com/a/64208406/8147680