在
resources/images
目录中,我想通过 vue3-carousel
库显示 10 个图像,图像名称为 1.jfif
、2.jfif
..等,但是属性绑定不能像这样工作,它会给出错误:Property assignment expected.
:
<Slide v-for="slide in 10" :key="slide">
<div class="carousel__item">
<img :src="../../images/{{slide}}.jfif" width="500" />
</div>
</Slide>
我也尝试过这样,使用模板字符串:
<img :src="`../../images/${slide}.jfif`" width="500" />
但它会在
public
目录中查找图像,它会给我类似 /images/2.jfif:1 GET http://localhost/images/2.jfif 404 (Not Found)
的错误
我该如何解决这个问题?谢谢
您可以将图像编码为 Base64,然后可以在绑定上使用它。
这个网站将为您做到这一点:https://www.base64-image.de/.
只需在那里上传您的图像,单击显示代码并复制“用于元素:”下面的内容。
由于 base64 编码非常大,我建议您存储在单独的文件中以保持代码井井有条。
示例: 图片.js
const image1 = 'data:image/png;base64...';
const image2 = 'data:image/png;base64...';
const images = [image1, image2];
export default images;
然后,您可以相应地在绑定上导入并使用它。
<Slide v-for="image in images" :key="image">
<div class="carousel__item">
<img :src="image" width="500" />
</div>
</Slide>