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

所以我在 div 中的模板中使用 vue3 我把 &lt;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 的值,你可以显示你的代码,所以我可以帮助你
  • 请告诉我,要添加/更改什么
猜你喜欢
  • 2014-03-17
  • 1970-01-01
  • 1970-01-01
  • 2015-12-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-03
  • 2017-03-19
相关资源
最近更新 更多