react 图像识别_无法在React中基于URL查找图像

react 图像识别

If you're new to React and are having trouble accessing images stored locally, you're not alone.

如果您不熟悉React，并且无法访问本地存储的图像，那么您并不孤单。

Imagine you have your images stored in a directory next to a component like this:

想象一下，您的图像存储在这样的组件旁边的目录中：

/src
/components
- component1
- component2
/img
- img1
- img2

And you're trying to access the images in the

/img

directory from

component2

:

而且您正在尝试从

component2

访问

/img

目录中的图像：

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom'
import { useTransition, animated, config } from "react-spring";
import imgArr from './images';
import '../App.css';

const Slideshow = () => {
const [index, set] = useState(0)
const transitions = useTransition(imgArr[index], item => item.id, {
from: { opacity: 0 },
enter: {opacity: 1 },
leave: { opacity: 0 },
config: config.molasses,
})
useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), [])
return transitions.map(({ item, props, key }) => (
<animated.div
key={key}
className="bg"
style={{ ...props, slideshowContainerStyle}}
>
<img className="img" src={require(item.url)} alt=""/>
</animated.div>
))
}

const slideshowContainerStyle = {
width: '80%',
height: '300px'
}

export default Slideshow;

You've tried the paths

../img/img1.jpg

and

..img/img1.jpg

, but get

Error: Cannot find module '<path>'

.

您已经尝试了

../img/img1.jpg

和

..img/img1.jpg

路径，但得到

Error: Cannot find module '<path>'

。

So what's going on here?

那么这是怎么回事？

关于

create-react-app

(A little about

create-react-app

)

Like most people, you probably used

create-react-app

to bootstrap your project.

像大多数人一样，您可能使用了

create-react-app

来引导您的项目。

In that case, using relative paths can be a bit tricky because

create-react-app

builds the HTML, CSS, and JavaScript files to an output folder:

在这种情况下，使用相对路径可能会有些棘手，因为

create-react-app

将HTML，CSS和JavaScript文件构建到输出文件夹中：

/public
- index.html
- bundle.js
- style.css

There are a number of ways to use images with

create-react-app

, but one of the easiest is to include your images into

/public

. When your project is built,

/public

serves as the root directory.

通过

create-react-app

有多种使用图像的方法，但是最简单的方法之一就是将图像包含在

/public

。 构建项目时，

/public

充当根目录。

You can read more about adding images or other assets in the Create React App docs.

您可以在Create React App文档中阅读有关添加图像或其他资产的更多信息。

汇入图片 (Importing images)

If you took a look at the docs, you'll notice that the code includes

import

statements to load assets like images and fonts.

如果您看一下文档，您会注意到该代码包含

import

语句，以加载诸如图像和字体之类的资产。

Importing is useful when your asset, in this case an image, is in the same directory or near the component that uses it, and won't be used anywhere else. For example, if you have an input component with buttons that use SVGs for thumbs up and thumbs down icons.

当您的资产(在这种情况下为映像)位于使用该资产的目录中或该组件附近，并且在其他任何地方都不会使用时，导入很有用。 例如，如果您有一个带有按钮的输入组件，这些按钮使用SVG表示大拇指和大拇指向下的图标。

A bit advantage of using

import

is that it will throw an error during build time if there's a typo. This sort of checking helps ensure users won't see a broken image that slipped by.

使用

import

一个优点是，如果有错字，它将在构建期间引发错误。 这种检查有助于确保用户不会看到滑动的破损图像。

翻译自: https://www.freecodecamp.org/news/unable-to-find-images-based-on-url-in-react/

react 图像识别