如何在Vue组件中链接图像？

Question

我的Vue项目结构为：-

from pynput.keyboard import Key, Listener

def a(key):
    print('{0} pressed'.format(
        key))
    if key == 'a':
        print('ape')

with Listener(on_press = a) as listener:
    listener.join()

|-public | |-symbol | |-smally.JPG |-src | |-components | |-Header.vue |-App.vue 包含：-

Header.vue

<template> <ons-page> <div class="toolbar"> <div class="toolbar__left"> <img src="./public/symbol/{{HeaderImage}}"/> </div> </div> </ons-page> </template> <script type="text/javascript"> export default{ name:'Header', props:['HeaderImage'] } </script> 包含

App.vue

它不起作用

Answer 1

您不需要放./public/

<img :src="'symbol/' + HeaderImage"/>

Answer 2

1. 在src中以assets命名新文件夹
2. 将您的图片放入assets文件夹中
3. 将<img src="./public/symbol/{{HeaderImage}}"/>文件中的<img :src="'~/assets/' + HeaderImage"/>更改为Header.vue