VUE为什么图片链接使用变量就显示不出来？

Question

这样写就能显示

<swiper-slide v-for="(item,index) in currentList">
              <div class="item">
                <div class="box">
                  <img src="../../public/part1/part1/1.jpg" />
                </div>
              </div>
</swiper-slide>

下面这样写就显示不出来 baseUrl是../../public/part1/part1/路径，item是数组里面的文件名

<swiper-slide v-for="(item,index) in currentList">
              <div class="item">
                <div class="box">
                  <img :src="baseUrl+item" />
                </div>
              </div>
</swiper-slide>

我看控制台图片路径好像也没错 但是为什么显示不出来呢

Answer 1

你写成运行时通过变量定义，是无法获取到的
下面三种都可以
<img :src="baseUrl+item" />
require("../../asset/images/" + imgSrc);
require(../../asset/images/${imgName}.png);

Answer 2

图片路径错没错，在控制台 open('../../public/part1/part1/1.jpg') ，看能不能打开就知道了。
写成绝对路径： /path/to/pic.jpg应该就可以了，当然这个绝对路径也要以能 open 为准，具体要看项目的目录结构。

Answer 3

基于一楼的回答，改进写了一个demo,附上代码

<swiper-slide v-for="(item,index) in currentList">
              <div class="item">
                <div class="box">
                  <img :src="handleImgSrc(item)" />
                </div>
              </div>
</swiper-slide>


handleImgSrc(src) {
  return require(`../../public/part1/part1/${src}`);
}

如还有问题，可以再追问。看到会回。

Answer 4

你在template里面写的 src="../../public/part1/part1/1.jpg"
会被编译成 src="./img/1.jpg",你看到的是编译后的结果，是相对于dist文件夹的。
如果你写成:src="imgUrl",会被编译成一个指向性的地址，指向src="../../public/part1/part1/1.jpg",而这个地址在打包文件夹中是不存在的

如果你一定要这么写，除了楼上的方法外，你还有两个方法：
1.把图片放在public文件夹下 然后写成 /img/img1.jpg
2.使用网络图片

Answer 5

vue-cli在编译的时候会改变目录结构，所以可能拿不到图片，可以使用这几种：

• 如三楼方式使用require，使用变量引入
• src="@/..."
• 放到public文件夹下使用相对路径引入src="/public/..."

Answer 6

对于SFCs vue,我们能在template|style中写图片的相对路径是vue-loader的功劳.

它会将

<img src="../image.png">

转换成 ⬇️

createElement('img', {
  attrs: {
    src: require('../image.png') // this is now a module request
  }
})

这里有一个转换规则：

• 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
• 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

• 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：

  <img src="~some-npm-package/foo.png">

• 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。

所以我们可以根据这个，扩展到你的场景可以使用的方式。
所以，当出现循环这类的运行时变量，vue-loader是无法判断运行时变量的。最简单就是直接使用require('xxx'),直接让webpack去处理

或者就是借助于类似url-loader|copy-webpack-plugin的能力,我们将本地图片，直接复制（或者转成了base64）到打包后的dist（一般部署站点也是以dist作为根目录）文件，然后以上文中绝对路径的使用方式。