vite项目中动态引用图片

Posted 2022-09-16 糖豆S

需求

vite 项目。使用图片作为 div 背景，但图片的地址是动态的。

const foo= ref("apple")
const divStyle = computed(() => 
  return 
    backgroundImage: `url($foo.value)`,
  ;
);

方案

方案一

两张图片 pic1 pic2 都放在 src/assets 下

<template>
  <input type="number" v-model="number" />
  <div style="width: 500px; height: 500px" :style="divStyle"></div>
</template>

<script setup>
import  computed, ref  from "vue";

const number = ref(1);
const imgSrc = computed(() => `../assets/pic$number.value.jpg`);
const divStyle = computed(() => 
  return 
    backgroundImage: `url($imgSrc.value)`,
  ;
);
</script>

结果：

• dev 时，图片地址为 …/assets/pic1.jpg，找不到图片
• prod时，图片地址为 …/assets/pic1.jpg，找不到图片（dist下没有这两张图片）

方案二

两张图片放在 public 下

const imgSrc = computed(() => `/pic$number.value.jpg`);

结果：

• dev 时，图片地址为 /pic1.jpg，能找到图片
• prod时，图片地址为 /pic1.jpg，能找到图片（dist下有这两张图片）

可行，但是不推荐，因为 public 不是用来干这个的。见 vite 的官方文档：

方案三（推荐）

两张图片放回 src/assets 下：

const imgSrc = computed(() => new URL(`../assets/pic$number.value.jpg`, import.meta.url).href);

结果：

• dev 时，图片地址为 http://127.0.0.1:5173/src/assets/pic1.jpg，能找到图片
• prod时，图片地址为 http://127.0.0.1:4173/assets/pic1.0d71d2fe.jpg，能找到图片（dist/assets 下有这两张图片，名字带hash）

可行，推荐。这种写法也是 vite 官网中提到的：