vuecli中引用static的问题

Question

各位大侠，我在网上学习的，有些图片要放在static目录下，所以我引用图片的代码是<img src='/static/tu.jpg'
，在代码打包后static文件夹和index.html在一个目录下，是可以正常引用的。
但我目前是在开发环境下，例如我的一个组件需要引用图片，他在src/components文件夹下，那我引用的代码用<img src='/static/tu.jpg'就不能正常显示了，我也看不到图片的效果了，我还要改成<img src='。。/。。/static/tu.jpg'格式。这样我的图片很多，好麻烦啊，请问大家平常是怎么搞的？

Answer 1

vue-cli，静态资源文件目录是public吧.

所以这种方式生效<img src='/static/tu.jpg'
对应的目录应该是
|public
| |--static
|src

Answer 2

static目录是vue-cli开启静态文件服务目录（好久不玩vue记得好像是这样），打包时需要正确配置webpack publicPath

在开发环境下：只要你把图片放在 static 目录下，按道理都能通过 <img src="/static/xx.jpg"> 访问

你把代码及图片目录贴一下，看看是什么原因

Answer 3

src下的文件采用 import的方式使用，如：

src
  |--assets
     |--myphoto.jpg

vue文件中引用这个图片的方式是

<template>
   <img :src="myphoto" >
</template>

<script>
import myphoto from '@/assets/myphoto.gif'
...
</script>