VueJs图像未显示答案

【问题标题】：VueJs image not displayedVueJs图像未显示
【发布时间】：2021-11-09 21:18:44
【问题描述】：

我有一个小问题，但我已经超过 2 小时无法解决...

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

在我的 register.html 我有那个代码：

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

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

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

【问题讨论】：

标签： vue.js lumen

【解决方案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

另一个来源：

How to import and use image in a Vue single file component?

【讨论】：

您好，我已经输入了<img :src="require('./assets/' +nation.drapeau)"/>，但是现在我在运行服务时遇到了这个错误：“找不到这个相关模块：* ./assets in ./node_modules/cache-loader/ dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ecc62542-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader .js??vue-loader-options!./src/modules/RegisterModule/Register.html?vue&type=template&id=5a5f74b3&"
它与 @ 类似 -> <img :src="require('@/assets/' +nation.drapeau)"/>

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

回复，谢谢大家：

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

【讨论】：