VueJs 图片不显示

Question

我觉得有点小问题，但是2个多小时没解决...

我有一个 VueJs 应用程序，我正在尝试显示来自 API 的图像。

在我的 register.html 中，我有代码 :

<img :src="'./assets/' +nation.drapeau"/>

当我检查浏览器时，我看到了正确的路径 './assets/images/drapeaux/AFC/Australie.png' 但没有显示任何内容！！！！为什么？我的路径不对？

我做错了什么？这是我的 VueJs 文件夹的结构

Answer 1

如果使用动态src，则必须使用require。它由 webpack 处理，它知道在构建后把它放在 dist 中。

<template>
  <div>STATIC IMAGE</div>
  <img src="./assets/logo.png" />

  <div>DYNAMIC IMAGE</div>
  <!-- <img :src="'./assets/logo.png'" />  IT DOESN'T WORK-->
  <img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>

演示：

https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281

另一个来源：

Answer 2

尝试使用 require，因为它是动态的 src

<img :src=require(`./assets/${nation.drapeau}`)/>

Answer 3

回复，谢谢大家：

<img :src="require('@/assets/' +nation.drapeau)"/>

VueJs 图片不显示

VueJs image not displayed

vue.js

lumen