时间戳

首页 > 解决方案 > VueJs图像未显示

vue.js - VueJs图像未显示

问题描述

我有我认为一个小问题，但我无法解决，因为超过 2 小时...

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

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

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

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

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

结构

标签： vue.jslumen

解决方案

如果使用动态 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

另一个来源：

如何在 Vue 单文件组件中导入和使用图片？

推荐阅读