<img :src="item.imageUrl" /> 在 vue3 中不起作用答案

【问题标题】：<img :src="item.imageUrl" /> not working in vue3<img :src="item.imageUrl" /> 在 vue3 中不起作用
【发布时间】：2021-09-29 11:52:05
【问题描述】：

所以我在 div 中的模板中使用 vue3 我把 <img :src="item.imageUrl" /> 和我放在脚本中

{    id: 3,
imageUrl: "apple.jpg",
name: "apple",   },

但它不起作用..我也尝试了 src/assets/apple.jpg 但不起作用..（我从其他人那里找到了这段代码，但我不明白为什么它不起作用。）有什么帮助吗？

【问题讨论】：

您能否提供一个最小的工作示例？另外，请注明“不工作” - 是否有任何控制台错误，或者图像没有显示？
@ConstantinGroß 只是图片没有显示，没有错误。

标签： vue.js vuejs3

【解决方案1】：

你可以创建函数：

<script>
export default {
  data() {
    return {
      item: { 
        id: 3,
        imageUrl: "apple.jpg",
        name: "apple"
      }
    }
  },
  setup() {
    const getImgUrl = (path) => { 
      return require('@/assets/' + path);
    }
    return { getImgUrl }
  }
}
</script>

然后在模板中调用该方法：

<template>
  <img :src="getImgUrl(item.imageUrl)"
</template>

【讨论】：

我把 setup() 放在哪里？还有路径，因为照片的第二条路径没有错误，但照片的第一条路径不起作用......你能解释一下吗？
像这样，如果图片在assets文件夹中（如果在其他文件夹中只是功能改变，例如'@/assets/images/'）并且imageUrl只是图片名称
但是在路径中放什么因为有错误
path 是参数，当你调用函数 getImageUrl 时你传递 item.imageUrl 的值，你可以显示你的代码，所以我可以帮助你
请告诉我，要添加/更改什么