正在从Svelte中的可读存储导入图像URL

Question

我正在像一样将图像URL存储在我的商店中

export const artPosts = readable([
{
"title": "Peak",
"tools": ["Blender", "Photoshop"],
"source":"$lib/img/1.png",
"alt": "A surreal neon 80's landscape"
},

然后我尝试用变量填充我的Art组件：

<script>
import { artPosts } from "../stores.js";
</script>
{#each $artPosts as item}
<div class="wrapper">
<img src={item.source} alt={item.alt} />
<h2>{item.title}</h2>
</div>
{/each}

将显示Alt文本，但不会显示图像。做这件事的正确方法是什么？

Answer 1

问题可能是路径中的$lib。您将不得不用最终的服务器路径替换它，或者配置您的构建工具来替换它。

由于这不是直接在import中使用的，因此路径不会自动解析。

假设您使用的是Vite：有一个define选项。

例如

// vite.config.js
const config = {
define: {
IMAGE_DIR: '/public/images',
},
};
export default config;

<script>
const images = [
"IMAGE_DIR/img1.jpg",
"IMAGE_DIR/img2.jpg",
"IMAGE_DIR/img3.jpg",
]
</script>
{JSON.stringify(images)}

(您可能希望使目录标识符相当不同，因为它只需替换每一个出现的内容，而不考虑语义。(

---

还可以选择单独导入图像：

import img1 from '$lib/img1.jpg';
import img2 from '$lib/img2.jpg';
import img3 from '$lib/img3.jpg';
const images = [
img1,
img2,
img3,
]

这样，$lib别名将被解析，并且结果变量将引用图像路径。当然，这只在实际的脚本中有效，而不是例如JSON。